Redes Sociais com efeito Opaco ( Opacity )

Olá. Bom hoje venho trazendo um tutorial muito legal, este tutorial é novamente sobre redes sociais.

Colocar redes sociais no blogger serve para divulgar aos seus leitores as redes sociais que você participa.
Também já citei outras rede sociais visite! 

• Redes sociais com efeito hover

1. faça o login no blogger. Vá no painel e clique em design depois clique em: Adicionar um Gadget > HTML/JavaScript


2. abaixo há dois tipos de efeito escolha um que mais lhe agradou e copie e cole no campo do gadget:


Código 1 - Efeito Transparente para Opaco

<style type="text/css">
div.sidebar-social-gadget {text-align:center;}
div.sidebar-social-gadget img {opacity:0.20;}
div.sidebar-social-gadget img:hover {opacity:1;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;}
</style>
<div class="sidebar-social-gadget">
<a title="Entre em contato conosco" href="link-da-página-de-contato"><img src="link-da-imagem-de-email" border="0" alt="E-mail" /></a>
<a title="Assine o Feed" href="link-do-seu-feed" target="_blank"><img src="link-da-imagem-do-feed" border="0" alt="Feed" /></a>
<a title="Siga-me no Twitter" href="link-do-seu-perfil-no-twitter" target="_blank"><img src="link-da-imagem-do-twitter" border="0" alt="Twitter" /></a>
<a title="Me adicione no Facebook" href="link-do-seu-perfil-no-facebook" target="_blank"><img src="link-da-imagem-do-facebook" border="0" alt="Facebook" /></a>
</div>

Código 2 - Efeito Opaco para Transparente

<style type="text/css">
div.sidebar-social-gadget {text-align:center;}
div.sidebar-social-gadget img {opacity:1;}
div.sidebar-social-gadget img:hover {opacity:0.20;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;}
</style>
<div class="sidebar-social-gadget">
<a title="Entre em contato conosco" href="link-da-página-de-contato"><img src="link-da-imagem-de-email" border="0" alt="E-mail" /></a>
<a title="Assine o Feed" href="link-do-seu-feed" target="_blank"><img src="link-da-imagem-do-feed" border="0" alt="Feed" /></a>
<a title="Siga-me no Twitter" href="link-do-seu-perfil-no-twitter" target="_blank"><img src="link-da-imagem-do-twitter" border="0" alt="Twitter" /></a>
<a title="Me adicione no Facebook" href="link-do-seu-perfil-no-facebook" target="_blank"><img src="link-da-imagem-do-facebook" border="0" alt="Facebook" /></a>
</div>

3. Substitua as partes de vermelho pelo que se pede.


Caso você queira excluir alguma rede social basta retirar a parte dela que consta no código.
Ou se você quiser adicionar alguma outra rede social, basta adicionar o código abaixo ao código do gadget, para cada nova rede social.

<a title="Título" href="Link da rede social" target="_blank"><img src="Imagem da rede social" border="0" alt="Nome da rede social" /></a>

Pronto.