Gadget Polaroid Ícones para Redes Sociais com CSS3

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

É-nos sabido que podemos fazer efeitos incríveis com CSS3, efeitos esses que antes, para serem obtidos, geralmente precisávamos de algum script e/ou plugin de jQuery.

Vamos ver agora um simples e elegante GADGET para exibir os ícones de redes sociais no seu blog usando apenas CSS3.

Demo

[becape]Antes de mais nada é sempre bom fazer um backup do seu template antes de fazer quaisquer modificações, para evitar possíveis transtornos.[/becape]

Entre no Layout do seu blog e adicione um gadget do tipo HTML/JavaScript. Insira aí o seguinte código:

<div id='social'>
<div id='icones'><ul>
<li><a href='#'><img src='http://1.bp.blogspot.com/-u3WKeJ8Yya4/UTSmz0c5yqI/AAAAAAAADAI/ROe1s1sABsw/s1600/delicious.png' /></a></li>
<li><a href='#'><img src='http://3.bp.blogspot.com/-L8QJcm4gAWM/UTSmz3s-NCI/AAAAAAAADAM/AZzTp_elcsA/s1600/feedburner.png' /></a></li>
<li><a href='#'><img src='http://3.bp.blogspot.com/-QB4FB1v8Cj0/UTSmz9SfS5I/AAAAAAAADAQ/jjT_x1C_tPI/s1600/facebook.png' /></a></li>
 <li><a href='#'><img src='http://3.bp.blogspot.com/-9vSZGHwF46k/UTSm0bc3c3I/AAAAAAAADAc/ZQklTHD7lCE/s1600/linkedin.png' /></a></li>
 <li><a href='#'><img src='http://3.bp.blogspot.com/-cEy4N8wYi0k/UTSm0VbhWwI/AAAAAAAADAg/0TcuUuLYNMI/s1600/rss.png' /></a></li>
<li><a href='#'><img src='http://2.bp.blogspot.com/-UWv6DlMOHAA/UTSm0byPCSI/AAAAAAAADAk/odEwyTW7wwg/s1600/flickr.png' /></a></li>
<li><a href='#'><img src='http://1.bp.blogspot.com/-YfO3jWePSIM/UTSm0xcbudI/AAAAAAAADAs/S3sy14i1THA/s1600/skype.png' /></a></li>
<li><a href='#'><img src='http://4.bp.blogspot.com/--pmEEnGL4p4/UTSm05Kp7UI/AAAAAAAADAw/Y5N73wRbT-c/s1600/twitter.png' /></a></li>
<li><a href='#'><img src='http://4.bp.blogspot.com/-8RHhZ1c7fyg/UTSm1Nlmz_I/AAAAAAAADA4/XU1Kl8h0gpE/s1600/youtube.png' /></a></li>
     </ul></div>
    </div>

Substitua as ocorrências de # pelos seus próprios links.
É recomendável que você baixe as imagens e as hospede onde achar melhor; e também é possível retirar ou incluir outros links, basta baixar os ícones diretamente por aqui.

[alerta]Este set de ícones não me pertence, eu apenas o encontrei aleatoriamente e tive a ideia do tutorial. Todos os direitos vão para o criador original.[/alerta]

Lembre-se apenas de editar o trecho da largura do container, destacado no CSS, caso queira incluir mais algum.

Após salvar, vá até o Designer de Modelo > Avançado > Adicionar CSS e cole o seguinte:

#social {
 width:700px; /* edite se for incluir mais links */
 position: fixed;
 top: 0px;
 left: 20px;
}
#icones {
 position: absolute;
 z-index: -1;
 margin-top: -57px;
 transition: margin-top 0.5s;
 -moz-transition: margin-top 0.5s;
 -webkit-transition: margin-top 0.5s;
 -o-transition: margin-top 0.5s;
}
#icones:hover {
 margin-top: 0px;
}
#icones li {
 margin: 0px;
 margin-top: -60px;
 padding: 0px;
 display: inline;
 z-index: 3000;
}
#icones img {
 opacity: 0.4;
 -moz-opacity: 0.4;
 -webkit-opacity: 0.4;
 -o-opacity: 0.4;
 transition: opacity .5s;
 -moz-transition: opacity .5s;
 -webkit-transition: opacity .5s;
 -o-transition: opacity .5s;
}
#icones img:hover {
 opacity: 1.0;
 -moz-opacity: 1.0;
 -webkit-opacity: 1.0;
 -o-opacity: 1.0;
}

 

O Designer de Modelo mostrará uma preview instantânea de como vai ficar.
Clique em Aplicar ao blog e pronto! Entre no seu blog e passe o mouse sobre um dos links para ver o efeito funcionando.

Bom, galera, espero que vcs tenham curtido o meu primeiro tutorial aqui no Mundo Blogger.
Até a próxima 😀

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn