Í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='http://lh3.googleusercontent.com/-9RgnEDN1jFc/UKK9O1S1TPI/AAAAAAAADSk/KOIvtDu-oSM/s36/social-facebook.png'/></a></li>

<li class='social_icon'><a href='http://twitter.com/#!/usuario'><img border='0' src='http://lh4.googleusercontent.com/-KtqAlZRCokQ/UKK9PbLsnSI/AAAAAAAADSg/njBnVDn3O9I/s36/social-twitter.png'/></a></li>

<li class='social_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='http://lh4.googleusercontent.com/-4PWKT-fgHJ8/UKK9O7mGEPI/AAAAAAAADSY/ENZ0BHmO6TY/s36/social-googleplus.png'/></a></li>

<li class='social_icon'><a href='http://nome-do-blog.com/feeds/posts/default'><img border='0' src='http://lh5.googleusercontent.com/-6hu6NkWouSw/UKK9PIQCrHI/AAAAAAAADSc/5QI5O-H7EYs/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.

Nome

Básicos,3,Blogger,43,Botões,2,buscadores,3,Comentários,5,Css3,9,Design,3,Dominio,3,Downloads,2,Efeito,13,Facebook,3,Feed,1,Festividades,1,GooglePlus,6,Hacks,7,HTML,8,Imagens,8,Menu,3,Recursos,3,Seo,8,Truque,24,Twitter,2,Widget - Gadget,16,
ltr
item
Bloggermin: Ícones sociais que giram ao passar o mouse
Ícones sociais que giram ao passar o mouse
Ícones rede sociais no topo do blog que giram ao passar o mouse
http://4.bp.blogspot.com/-hKINp7aUGoA/ULLLLepK4qI/AAAAAAAAAsU/GBB-6w7jVwg/s400/icones%2Bsociais.png
http://4.bp.blogspot.com/-hKINp7aUGoA/ULLLLepK4qI/AAAAAAAAAsU/GBB-6w7jVwg/s72-c/icones%2Bsociais.png
Bloggermin
https://www.bloggermin.cashmore.com.br/2012/11/icones-sociais-que-giram-ao-passar-o-mouse.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/2012/11/icones-sociais-que-giram-ao-passar-o-mouse.html
true
3085171147808187471
UTF-8
Carregado Todas os Posts. Não foi encontrado nenhum post. VER TUDO Leia mais Responder Cancelar resposta Excluir Por Home PÁGINAS POSTAGENS Ver tudo RECOMENDADO PARA VOCÊ ETIQUETA ARQUIVO PESQUISAR TODAS AS PUBLICAÇÕES Não foi encontrado qualquer correspondência postal com o seu pedido Voltar a Home Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir O CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear Copiar Todo o Código Selecionar Todo o Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar