Tweet Efeito “Opacity” Menu-Redes Sociais

Ter um menu para suas redes sociais além de muito charmoso é bastante útil para a divulgação do seu blog não é? Agora que tal dar um efeito especial a ele.

Veja exemplo aqui

Esse código CSS permite criar efeito bem simpático, e muito simples de customizar. Usei esses ícones como exemplo mas você pode e deve procurar os que mais combinam com seu layout e, é óbvio, ícones das redes as quais você pertence.


Primeiro passo: Escolha os ícones, salve em seu computador e hospede em um site tipo Phobucket, Picasa ou Tinypic.
Sugestão: No site Iconfinder você vai encontrar 100.000 ícones FREE para fazer download.






Muito bem, tendo os ícones salvos e hospedados, vamos editar aos códigos.
Código CSS

<style type="text/css">
img {
border: 0;
}
#menu {
width:400px;
position:relative;
height:100px;
margin:100px auto;
}
#menu a:visited, #menu a {
text-decoration:none;
color:#d00;
font-weight:bold;
#menu a:visited img, #menu a img{
filter: alpha(opacity=40);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.40; opacity:0.4;
}
#menu a:hover {
background-color:transparent;
color:#06a;
}
#menu a span {
display:none;
}
#menu a:hover span {
display:block;
position:absolute;
top:50px;
left:0;
font-size:12px;
height:18px;
padding:4px;
font-weight:normal;
color:#a40;
}
#menu a:hover img {
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1.00; opacity:1;
}
</style>

Codigo HTML

<div id="menu">
<a href="ENDEREÇO DO LINK"> <img src="ENDEREÇO DA IMAGEM" alt="" title="" /> <span>TEXTO QUE APARECE AO CLICAR NO ÍCONE</span></a>
<a href="ENDEREÇO DO LINK"> <img src="ENDEREÇO DA IMAGEM" alt="" title="" /> <span>TEXTO QUE APARECE AO CLICAR NO ÍCONE</span></a>
</div>

O Código CSS é o que dá o estilo (opacidade, estilo das letras, largura, altura) e podem ser alteradas de acordo com seu gosto, espaço e número de ícones que serão inseridos.
O Código HTML, define o link, a imagem (ícone) e texto que aparecerá ao clicar. Observe o trecho entre as tags <div id="menu"> e </div> :

.
<a href="ENDEREÇO DO LINK"> <img src="ENDEREÇO DA IMAGEM" alt="" title="" /> <span>TEXTO QUE APARECE AO CLICAR NO ÍCONE</span>
.

Repita o código para cada ícone que quer no menu.

Caso não queria que o texto apareça, é só apagar o trecho:

.
<span>TEXTO QUE APARECE AO CLICAR NO ÍCONE</span>
.

Sim, agora você quer saber onde e como colocar no seu template, claro. Eu sugiro que você use um blog de testes antes de se aventurar no seu template, é mais seguro.

Faça Login, no painel clic em Layout, em layout clic “Editar HTML”.
Copie e cole o Código CSS acima da tag </head>

• Para que o menu apareça na Sidebar

Copie e cole o Código HTML abaixo seguinte trecho:

<div id='sidebar-wrapper>

• Para que o menu apareça no final do post

Clic em “Expandir modelo de widgets” e procure o seguinte trecho:

<div class='post-footer-line post-footer-line-1'>

Copie e cole o Código HTML abaixo dele.

Há outro lugares para se colocar o menu, mas isso fica para outro tutorial. Use sua criatividade e boa brincadeira!