ÍCONES SOCIAIS 3D COM EFEITO DE GIRO PARA BLOGGER

Atualmente as redes sociais desempenham um papel muito importante na divulgação do conteúdo do seu blog. É essencial que você adicione os ícones das redes sociais em blog e convide as pessoas a compartilhar seu artigos. É fundamental para ganhar visibilidade na rede. Hoje vou ensinar como colocar um pacote de ícones sociais 3D com efeito de giro no blogger.

O principal efeito desses ícones  é o giro de 360 graus, efeito conseguido com CSS. Quando você coloca o cursor sobre o ícone ele gira 360 graus, quando o cursor é removido ele gira 360 graus de volta.

E também tem um ligeiro efeito hover de opacidade nos ícones. Neste post vou mostrar como adicionar os ícones em seu blogger.
Aqui estão os ícones em pleno funcionamento, veja o que acontece quando você coloca o cursor sobre eles.

Como adicionar os ícones sociais 3D com efeito de giro para Blogger

1. Acesse o painel do seu blog 
2. Clique na guia "Layout" 
3. Clique em 'Adicionar um gadget' → Escolha tipo'HTML/Javascript' e cole o seguinte código: 
  

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmqFheXasOdw5l_1srpRRshPReWWbPS3AW3OOZPx72jBW_ALuUN7yiQ0iP-gXLlN6fphujgMh7dTD57XteIaeoi80Y5uyxxhVQHkdYKigDEeWaQfJ42-yXeKQSH8LwQgys-U5wMFzmSboR/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisMWzDRV_yzF1zCFgBSst5XmciIyOsVHM-BRb1TDY5y9myW5akHLxnP4ECUc3qishi5icFo5DMbsSU-_G3Yb1Ah9Fzc0_4g8iN2KE3syIiEYzF5qOJ6rQhHh7M9TCikgG_o2gqslVITNom/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkjUCjb81KptKETJFzqsZsE1Z2W_C2KPF2qKL6xxZQuoSiAzLNSAp5wwOYPVDWH0tHd2Tv2tylFM86YtbrQlsv_3eT3YJOFcMg38nDzoHDvGAJwllenDb2OvFvPJtvAGcgletRxYBcT99O/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs_gYY4LkFDUjvtQEwNn_2dKUxTvSW2-sBoIQiJZ9rpnto0IqgO6ZNNpPp64FuxXQWZqw8-zhup97C9bLtSXpOOsq6kAXMpp4ANoIKW1peBZHlNmTHxL5ALe_Tk6O5fw4W75y7hAeonVrT/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTl5OMYM2vY9rClPGwi85cHPU62JQP6pvVMoCI049ZReYKqrzsVBhqfzdsNpa_9IWvZC04D6oEiX_PbzA4Gb7xvqv1MMsDXZICpzkFbW6C8yNSmXLKWJWvyoP2X_8q3lmN3fMKUJGIQ7_C/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTpKOXrx2UntP-nVlegCeie3rO15_6RZgwUgjbULCDgvT1XKGH1fQekZ-kH7K_gaZPBszSmwESAyo3mb_cjlHdZp0UT6ZzUGuP3-Z7WsSkQpJu65WerL5GUbi00THBp2ZVmpTq6jKuyknv/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/> <!--Start Feed Count Button--> <a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="Nome-do-seu-blog" src="http://feeds.feedburner.com/~fc/nome-do-seu-blog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>

Importante – Substitua os textos destacados em azul com seus perfis sociais e o nome do seu blog.

Salve e pronto!

Qualquer duvida não hesite em perguntar.

Até a próxima!

Fonte: DicasBlogger