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/AVvXsEjVZPJb1STN-JseFPLitxUHSoNiFfeGavd2Fhfouu6NHnOi4GDBdAxsHC_VzUoqHwDKN8jpZhU_1c6v_wBg8EK3LJ1u8RVCzrW5dNRt1pG97ZHL1v0UX9Dtr5SfPDxPjjDh2cF-88SJksMF/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/AVvXsEgxPkAfx8zqLNaZ29632v8OMnR1MMARgKE4stB3BFvkofjzcPbcOIBRjmJXsEgLL7ZmcGADICdBBwTz9CUrJhYc0VMTzf9kmRZI0PVTGAy2Wet9NA5JckGYh5E-8RvfP4p6049NGUhF5GmI/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/AVvXsEjYq8QrwqC3nqbdq1ML3uAWD6AusQWNNgrzNBdHX0VLto-X3yihy8pEm2Rscta3u170rID__0hq_PDPKwF3r5taVZBErpaX57rsm8lyymg2pOFLfpYhCv5IpHB6s4J5bfuzYzRZUPuxJwAr/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/AVvXsEiurSue7v1TK9EqEuwiW8uKUV97eyJ3czwxJ2XVchqQwhkFIa3XnV-RoJSaFzyKgnk5E0IdxygR_d46qW2i2h_6Oovt-DSZGgWmFjCDIMvvJ2jVC0slYJqDOPUZRg0lteoxKUqYksRsIPwl/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/AVvXsEgtWW6v04l4JHL_D5nvWbWJlYEzF-FMF-ZKxNKZ1eryv3sYW7XYwLx5MrodhRIAN8ujgUmmSt5cRGTazyv0HMMTIINgmM7_Sj90hicoRA8LPl_jHGwee6xqHtUEa-eHRyN63S-je_yTcnow/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/AVvXsEj60tcO5ltqzc_SgcGN3uLWzWHkd9U0TH-fwkI8G5BiAOvWFF9j4enSeU29yHNEoqdmARTpgKyJ3RWNRBavD0xk6Tg8FbhToOb8u6A6swW405NozfoHG969nNA0p56Ryf3gJOq4oBMi1rWW/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!
0 comentários:
Postar um comentário