sábado, 25 de maio de 2013

Widgets com ícones para redes sociais no seu blog

_________________________________________________________________________________



Uma grande ajuda para os blogs, são os ícones das redes sociais, é um incentivo aos visitantes seguirem no twiter, facebook, orkuta assinarem os feeds do blog. 
Então, agora iremos colocar dois gadgets baseados em CSS, é bem simples e fácil de colocar no Blogger.   

ANTES DE TUDO SEMPRE FAZER UM BACKUP DO SEU TEMPLATE


Vamos lá

Widget 1 – Twitter, Feeds e Facebook

socialmedia-icons

Vá em MODELO e em Editar HTML - Como na figura 01



Agora dê um Crtl+F com o teclado e procure por   ]]></b:skin>
Quando encontrar o código  ]]></b:skin>,  á baixo dele cole esse - Como na figura 02

/* 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;}



Vá agora em LAYOUT em seguida click em ADICIONAR UM GADGET procure por
HTML/javascript e cole este código:    Como na figura 03

<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 FEEDcoloque o endereço dos feeds do blog
  • Em URL DO FACEBOOKcoloque o endereço do seu perfil ou da página de fãs

Widegt 2 - Feeds, Twitter, YouTube, Orkut e Facebook

Esse Widegt 2 é só seguir o passo da figura 03 do widegt 1

Vá em LAYOUT em seguida click em ADICIONAR UM GADGET procure por
HTML/javascript e cole este código: 

<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>

  • Em URL DO YOUTUBE, escreva o endereço do seu Twitter
  • Em URL DO ORKUTcoloque o endereço dos feeds do blog
  • Em URL DO FACEBOOKcoloque o endereço do seu perfil ou da página de fãs

Exemplo: Os gadgets ficará como na figura á baixo


È isso ai até mais....

Click Dicas Na Internet


Nenhum comentário:

Postar um comentário