Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1498248146
Vida do cache: 1498291346
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Efeitos CSS

Incluir Efeito Opacity em Links e Textos no blog

Atendendo ao pedido feito por @Cafedolivro, vou mostrar,neste artigo,como aplicar um efeito transparente em links ou textos na sidebar do blog.
Você já viu, neste post que a propriedade Opacity permite que você aplique níveis de transparência a uma imagem e agora verá a possibilidade de aplicação de transparências em outros elementos, como links e textos.

A primeira coisa que devemos fazer é criarmos uma “class” e aplicar estilos a esta class , para que ela possa ser incorporada ao template e ser adicionada diretamente ao elemento sempre que quisermos utilizá-la.
No nosso exemplo, vamos criar uma “class” e nomeá-la de “transparente“.
Vejamos:

1. Aplicando transparência em links na sidebar:

Vá no menu “modelo >> Editar HTML” , não precisa clicar em “Expandir modelos de widgets”,e acrescente uma nova ‘class‘ ANTES da tag ]]></b:skin>


.transparente a {
font-size:XXpx; /*Coloque tamanho da fonte se quiser*/
color:XXX;  /*Coloque cor da fonte se quiser*/
text-decoration: none;
filter: alpha(opacity:0.4);
KHTMLOpacity: 0.4;
MozOpacity: 0.4;
-khtml-opacity:.40;
-ms-filter:"alpha(opacity=40)";
-moz-opacity:.40;
filter:alpha(opacity=40);
opacity:.40;
}
.transparente a:hover {
font-size: XXpx; /*Coloque tamanho da fonte se quiser*/
color:XXX; /*Coloque cor da fonte se quiser*/
text-decoration: none;
filter: alpha(opacity:1);
KHTMLOpacity: 1;
MozOpacity: 1;
-khtml-opacity:.1;
-ms-filter:"alpha(opacity=100)";
-moz-opacity:1;
filter:alpha(opacity=100);
opacity:1;
}

Quando quisermos mostrar a “class transparente”, devemos acrescentar uma condicional no local onde queremos que o efeito se aplique.
Por exemplo, se você quer aplicar o efeito em um link na sidebar, vá até o menu “layout”, clique em “adicionar gadget”, escolha a opção “html/javascript” e cole esse código:


<div class="transparente">
<a href="SEU-LINK-AQUI">LINK</a></div>

Sempre que quiser aplicar o efeito opacity em links será necessário colar este código.

2. Aplicando transparência em textos na sidebar:

Cole este código bem ABAIXO da “class” que você já criou anteriormente:


.transparente-text {
font-size:XXpx; /*Coloque tamanho da fonte se quiser*/
color:XXX;  /*Coloque cor da fonte se quiser*/
text-decoration: none;
filter: alpha(opacity:0.4);
KHTMLOpacity: 0.4;
MozOpacity: 0.4;
-khtml-opacity:.40;
-ms-filter:"alpha(opacity=40)";
-moz-opacity:.40;
filter:alpha(opacity=40);
opacity:.40;
}

Quando for utlizar o efeito opacity em textos utilize esse código:


<p class="transparente-text">
ESCREVA SEU TEXTO AQUI.
</p>

 

Veja como fica o código para aplicação do efeito em link e texto ao mesmo tempo:


<div class="transparente">
<a href="SEU-LINK-AQUI">LINK</a>
<p class="transparente-text">
ESCREVA SEU TEXTO AQUI.
</p>
</div></div>

DEMO
(Confira o item na sidebar “Efeito Opacity)



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

2 Comentários

  1. ::Clau:: disse:

    @Ricardo Tavares:
    Eu que agradeço pelo comentário. Volte sempre!

  2. Ricardo Lino Tavares disse:

    Nossa, Parabéns pela página é pelas dicas… Obrigadão! Tô fazendo pela primeira vez meu blog. Sou desenhista (2d e 3D) e estou incrementando minha página pra conseguir um bom trampo! Valeu! Se quiser fazer uma visita (http://ricardotavarez.blogspot.com/)tá tosquinho ainda… mas com tuas dicas vai ficar jóia! Abração

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.