Ícones sociais que giram ao passar o mouse

Ícones rede sociais no topo do blog que giram ao passar o mouse

Constantemente perguntam-me como colocar acima do blog, ícones que apontam para redes sociais, é que possuir ícones como estes a vista aumenta a possibilidade de que os leitores possam acompanhar-nos por diferentes redes sociais,já que deixamos o acesso a eles de forma mais visível.

Sigam o Bloggermin no Twitter e no Google+, e curta nossa página no Facebook.

Existem várias maneiras de fazê-lo, vamos fazer isso usando uma lista não ordenada contendo os ícones do Facebook, Twitter, Google+ e o feed do blog, e como um extra faremos com que os ícones girem passando o mouse sobre eles:

• 
• 
• 
• 

Tutorial
Para colocar estes ícones sociais em seu blog entre no Editar HTML do modelo e adicone antes de ]]></b:skin>, o estilo:

/* Icones de redes sociais
----------------------------------------------- */
#social-iconos {
width:100%;
height:50px;
margin-bottom:10px;
display:block;
clear:both;
}
.social-icons{display:table}
.social-icons ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
text-align:right;
padding:5px 5px 0 0
}
.social-icons ul {
padding:0;
float:right;
margin-bottom:0;
}
.social-icons li.social_icon {
background:none !important;
padding-left:0 !important;
display:inline;
float:left;
margin-left:6px;
}
.social-icons li:hover {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
}

Em seguida, SEM expandir os gadgets procure esta linha:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Acima dele, adicione a estrutura:

<div class='social-icons' id='social-iconos'>
<ul>
<li class='social_icon'><a href='http://facebook.com/usuario'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_zFO4AyDcZJieK3qdELHWms2qSNOMJMqr5e5fBAgaEk9KYloxffRHFWDB2Qn1QvjVKV8ifzhlMZB53I__Tflrthb2B4cgj5rlSVTk2rKKHdMZzAvsfIix6rsfiayk4i8b86es2Uudctg/s36/social-facebook.png'/></a></li>

<li class='social_icon'><a href='http://twitter.com/#!/usuario'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg26SFWV9KeKt32_pAl6mDvPvup6FH9eWM5x32Jv82_-oJo9AkIXlxbSJSEJfUlRgID9oXIQf8p71vfRiJNxyeT6wmee5frsgvnPjbbQik0GBso8Dl10TGZK0EsvDXpqbmpaET2DanmaAA/s36/social-twitter.png'/></a></li>

<li class='social_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxvaTKXGur1xpZ8R51GV6kYlh48crQYmbZ2p79FxO3klWAYHiXxWgvyNgat5xfHvgEie0uInbAng_PY8uc3yi1eEfVQc_6mH88IYg3WqyEyvVJjCTbwuDNHlJay9zENMXRYzzfU2iN-9s/s36/social-googleplus.png'/></a></li>

<li class='social_icon'><a href='http://nome-do-blog.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnITtnVFS1oS2qq8r3MK8b7w-VtOQC2-QKXUwX3mJ0NfAfIUH9tTCpRklmitQtiD13q0rm2JuQrZNQR1rhprDBiFw9dGPI84faAR0YRzs1Nj82pqyW6P1AMdE68ybtSVjTM2lzleW7cgo/s36/social-rss.png'/></a></li>

</ul></div>

Mude o que está em vermelho pelos seus dados e pronto. O primeiro é o usuário do Facebook, o segundo do Twitter, o terceiro vai precisar alterar o X pela ID do seu perfil do Google+ e no quarto você precisará colocar o nome do seu blog.

É claro que você pode adicionar ícones mais se você quiser, você só precisa adicionar antes </ul></div> uma linha como esta para cada ícone extra que você deseja:

<li class='social_icon'><a href='URL do link'><img border='0' src='URL da imagem'/></a></li>

Embora sejam projetados para serem exibidos acima do blog pode colocá-los onde quiser, você mesmo pode colocá-los em um elemento HTML/Javascript, isso será uma escolha de cada pessoa.

O efeito que gira é feito com CSS3 em navegadores mais antigos esse efeito não funcionará.
Os ícones são do Iconfinder exceto do Google+ que eu projetei, mas podem ser substituídos pelos ícones de sua escolha.