Widgets com ícones para redes sociais

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.

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>

 

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.