Widgets com ícones para redes sociais

Postado por Juliana






  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, criei dois gadgets baseados em CSS, super simples de serem implementados no Blogger.


  Recomendo fortemente que as imagens dos ícones sejam enviadas para a conta do Picasa de vocês e que as URLs dessas imagens sejam substituídas.

• Como hospedar imagens no Picasa
• Backup no Picasa de imagens contidas nos templates

Widget 1 – Twitter, Feeds e Facebook





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





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>

Neste template de testes, é possível ver os dois gadgets em ação. Clique para ampliar.





Atualização em 03/03/2011


Tem coisas no Blogger que são simplesmente inexplicáveis. Até outro dia, bastava colar a URL da imagem no local indicado e pronto. Atualmente, notei que as imagens hospedadas no Picasa Web não estavam aparecendo mais. Depois de muita investigação, descobri que – sabe-se lá porque – o Blogger estava mudando as URLs por conta própria. A solução é ainda mais bizarra rs Depois de colar o código no gadget HTML/Javascrip, é preciso clicar em “Formato Rich Text” para que as imagens funcionem. Prefiro nem comentar.


Fonte: http://www.dicasblogger.com.br