Como incluir icones para as redes sociais no seu blog

    A última moda em blogs, são os ícones para as redes sociais. O principal objetivo é incentivar os visitantes a seguirem no Twitter, Orkut, Facebook e a assinarem os feeds do blog. 
Pra ajudá-los, achei dois gadgets baseados em CSS, super simples de serem implementados no Blogger.

Widget 1 – Twitter, Feeds e Facebook

socialmedia-icons



Vá no HTML do template, dê um Crtl+F com o teclado e procure por ]]></b:skin> .
Cole antes dessa tag o seguinte código:
/* SOCIAL MEDIA
----------------------------------------------- */
#socialmedia{background:#F6F8F8;border:1px solid #DBE2E0;padding:10px 5px 15px 10px; margin: 5px;}
#socialmedia:hover{border:1px solid #90C2D7;}
#socialmedia a{color:#666666;text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif}
#socialmedia a:hover{color:#3c88b2;text-decoration:underline}
#socialmedia img{vertical-align:middle;margin-right:5px;}
Salve o template. Vá nos elementos de página e clique em adicionar gadget. Escolha HTML/javascript e cole este outro código:
<div id='socialmedia'><img alt='' src='https://lh3.googleusercontent.com/_mcq01yDJ2uY/TW_BEKq7aTI/AAAAAAAAEUw/Lb9JMwUAiZ8/socialconnecttwitter.png' style='width: 32px; height: 32px; float:left;'/>
<a href='URL DO TWITTER'>Siga no Twitter</a>
</div>
<div id='socialmedia'><img alt='' src='https://lh5.googleusercontent.com/_mcq01yDJ2uY/TW630L9WcaI/AAAAAAAAEUM/iLypEEa1b5Y/socialconnectrss.png' style='width: 32px; height: 32px; float:left;'/>
<a href='URL DOS FEEDS'>Assine os feeds</a>
</div>
<div id='socialmedia'><img alt='' src='https://lh3.googleusercontent.com/_mcq01yDJ2uY/TW_BI34MoHI/AAAAAAAAEU0/GuFjmmcm87w/socialconnectfacebook.png' style='width: 32px; height: 32px; float:left;'/>
<a href='URL DO FACEBOOK'>Curta no Facebook</a>
</div>
  • Em URL DO TWITTER, escreva o endereço do seu Twitter
  • Em URL DO FEED, coloque o endereço dos feeds do blog
  • Em URL DO FACEBOOK, coloque o endereço do seu perfil ou da página de fãs
Widegt 2 - Feeds, Twitter, YouTube, Orkut e Facebook
    socialmedia icons
No painel do Blogger, clique em design > adicionar gadget>HTML/javascript.
Cole o código abaixo, fazendo as respectivas alterações (em vermelho)
<div style="margin: 5px; padding: 10px;"><a
href="ENDEREÇO DO FEED"><img
style="border: 0px solid ; width: 48px; height: 48px; float: left;"
alt=""
src="http://lh5.ggpht.com/_dAGEULh1_1g/THwD-xP5n9I/AAAAAAAAEBk/1DE1CA0UtCA/rss.png"></a><a
href="ENDEREÇO DO TWITTER"><img
style="border: 0px solid ; padding-left: 5px; width: 48px; height: 48px;"
alt=""
src="http://lh4.ggpht.com/_dAGEULh1_1g/THwD-5SoTTI/AAAAAAAAEBo/Yh2jRrtkOeo/twitter.png"></a><a
href="ENDEREÇO DO YOUTUBE"><img
style="border: 0px solid ; width: 48px; height: 48px; padding-left: 5px;"
alt=""
src="http://lh3.ggpht.com/_dAGEULh1_1g/THwD-4XjHKI/AAAAAAAAEBs/waG0ImvEsQI/youtube.png"></a><a
href="ENDEREÇO DO ORKUT"><img
style="border: 0px solid ; width: 48px; height: 48px; padding-left: 5px;"
alt=""
src="http://lh4.ggpht.com/_dAGEULh1_1g/THwD-3vEZVI/AAAAAAAAEBg/jq-RSB5gXBc/orkut.png"></a><a
href="ENDEREÇO DO FACEBOOK"><img
style="border: 0px solid ; width: 48px; height: 48px; padding-left: 5px;"
alt=""
src="http://lh6.ggpht.com/_dAGEULh1_1g/THwD-vZ7bDI/AAAAAAAAEBc/4fHoPnWmq8M/facebook.png"></a><br></div>
    Não esqueça, quando mais completo for seu Blog mais atrente ele fica e mais rápito você lucra com ele.

Nenhum comentário:

Postar um comentário