Ícones para redes sociais com efeito Opacity

 Sabe esses ícones que eu uso no topo do meu blog, de redes sociais? Hoje vou ensinar como fazer para colocar ícones iguais a esses no seu blog!

É muito fácil e o código é bem simples...

Primeiramente, entre com sua conta no Blogger e entre na aba "Layout" (ou "Design>>Elementos de Página" no modelo antigo) e clique em "Adicionar Elemento" e escolha "HTML/Javascript". Cole o código abaixo no espaço:

<a href="ENDEREÇO DO FEED"><img style="height: 64px; width: 64px; opacity: 0.5;" src="ENDEREÇO DA IMAGEM DO FEED" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" /></a>



<a href="ENDEREÇO DO FACEBOOK"><img style="height: 64px; width: 64px; opacity: 0.5;" src="ENDEREÇO DA IMAGEM DO FACEBOOK" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" /></a>



 <a href="ENDEREÇO DO TWITTER"><img style="height: 64px; width: 64px; opacity: 0.5;" src="ENDEREÇO DA IMAGEM DO TWITTER" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" /></a>

Não esqueça de colocar no código o endereço dos seus links e imagens!
Lembrando que você pode adicionar quantos ícones quiser! É só repetir o código a partir de "<a href="ENDEREÇO DO LINK" até "</a>"
"Width" representa a largura da imagem e "height", a altura. Você também pode alterá - los conforme seu gosto!

Dá só uma olhada no resultado:

Que tal um botão desses no seu blog??
Pase o mouse em cima da imagem para ver o resultado!
E aí, o que vocês acharam do efeito Opacity? Comentem dando opiniões!