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 blog2. 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/AVvXsEhXsP_EN7qYqhtdnTJWXTKPFV7JlSb6C8vIHTdQWXTQ0qEbWASr-LPIquJxh7ddPfMlXCcbEka1bmZc2OSBDurwCJk4nrWB5fSplcHxK8ITMd3iPQJwW4wgNAxrnGKqmwC9BNdQNKFGkcFf/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/AVvXsEiCB2coQrdhRQwk1yuD25lx-dtkve-3GSopR7SojpYLR3tNTrWPZkX2giwCSle2_qhgdOjdz_FX4AoP-aCt0ObqoXVQc1BJcZwdWn8f_BUhHn3C2oro-F7wCvOjcMmRIITpiBgUWLkc7bxM/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/AVvXsEjhv-kST6SvKRdJbjO9t1WXAxsJw5ziMrCPHOIxzd7KZw96Yp8Qn90R9Gs2q6jHwfK0n3zfvnH6jmYH4HW_cgl72U8xLappB8UushTLpxoTNOToz_Z945lAZoUd61mLWztBP4GCf1eaqF05/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/AVvXsEhAOfnAvB0pJsiD6uvhnWltanNgFT0BY1DLsCL1lcv_DOXt7NWES5Y7A2UMVHJiR1fYkeEmGXnYWbiEfH9vDx9wUnuwHrgXLC_eYc-FzF_aMaWqTrFWhmpiSFw6anZ8UCi7yEMvkg076t9A/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/AVvXsEjduaTvxxtnUxGqtMhQ5MUz6Pvs1NwExCPvNSPvvbhL80BQY445A2io7p4ixMhItg_LgiX2FymiSal1w5frN0OrDvwwISe-XTO4ayupeHYIYOK9LC64DIdUiRn8YLB2goBCTJ9OtTZNJMqs/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/AVvXsEhHG2rSoayP333UMY3TxhtZ0Ycitkux8RFiBes9HkfO_H2YLolnAIFzg3Od2xTSsMm610QKwXKZ2aucNrDBSEt7DJbJ1cz81Z5nBh3mMikFpq-xo_Tnm94kY_EWPGbGSF4vy856VPVG6wnU/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!
