Widget Box de Redes sociais na Sidebar

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

Como todos sabem, a maioria dos usuários utilizam-se de várias redes sociais para divulgar conteúdos de sites ou blogs, ou como forma de interação blogueiro/leitor.
E para uma boa divulgação, nada melhor que exibir no seu blog, as redes sociais as quais participa, fazendo com que seus leitores tenham outras opções de acompanhar as novidades que você publica, ou como forma de interação.
Eu criei um menu com icones de divulgação das redes sociais para que você possa divulgar as redes sociais que participa e instalar na sidebar do seu blog. Trata-se do widget Box de redes Sociais.
Esse menu é bem simples de instalar e tem suporte para uma maior personalização.
Veja Demo do widget:

((Clique na imagem))

1º Passo:

Vá na aba “Design”, entre na edição HTML do seu template, não precisa clicar em “expandir modelos de widgets” e procure pela tag ]]></b:skin>
e cole o seguinte código logo ACIMA dela:

/* boxRedeSocial
--------------------- */
.boxredesocial{
padding:5px 0px;
}
.boxsocial{
margin:5px;
border:1px solid #ddd; /*---cor da borda--*/
color:#999999;  /*---cor do texto--*/
padding:5px;
}
.boxsocial a span {
font-size: 14px;  /*---tamanho do texto--*/
line-height: 14px;
font-family: Arial;
display: block;
font-weight: bold;
}
.boxsocial a span:hover {
color:#8B0000; /*---cor do texto hover--*/
}
.boxsocial a{
color:#607B8B;  /*---cor do link--*/
text-decoration:none;
}
.boxsocial:hover{
margin:5px;
border:1px solid #333333;  /*---cor da borda hover--*/
padding:5px;
}
.boxsocial a:hover{
color:#8B0000;  /*---cor do link hover--*/
text-decoration:none;
}

Só edite os trechos que estão destacados. Você pode personalizar as cores de bordas,e links de acordo com as cores do seu template.

2º Passo:

Vá para a aba “Design”, clique em “adicionar um gadget”, escolha o modo HTML/javascript e cole o seguinte código:

<div class="boxredesocial">

<div class="boxsocial">
<table><tr><td><img src="http://lh6.ggpht.com/_UCfxgWHzU98/TGwHs4qifrI/AAAAAAAADXc/Uv7pGb0uFic/twitter.png" /></td> <td><a href="LINK-DO-TWITTER" target='_blank'><span>Twitter</span> Siga-nos no twitter</a></td></tr></table></div>

<div class="boxsocial">
<table><tr><td><img src="http://lh4.ggpht.com/_UCfxgWHzU98/TGwHMeFGBSI/AAAAAAAADWk/m4XAZzZ3g3k/facebook.png" /></td><td><a href="LINK-DO-FACEBOOK" target='_blank'><span>Facebook</span> Acompanhe no facebook</a></td>
</tr></table></div>

<div class="boxsocial">
<table><tr><td><img src="http://lh6.ggpht.com/_UCfxgWHzU98/TGwNfv07JfI/AAAAAAAADXw/LLzhCQmj5P0/orkut.png" /></td><td><a href="LINK-DO-ORKUT" target='_blank'><span>Orkut</span> Acompanhe no orkut</a></td>
</tr></table></div>

<div class="boxsocial">
<table><tr><td><img src="http://lh5.ggpht.com/_UCfxgWHzU98/TGwHWkbK6fI/AAAAAAAADWs/eqf8NFDqhO8/google_buzz.png" /></td><td><a href="LINK-DO-GOOGLE-BUZZ" target='_blank'><span>Google Buzz</span> Siga no Google Buzz</a></td>
</tr></table></div>

<div class="boxsocial">
<table><tr><td><img src="http://lh3.ggpht.com/_UCfxgWHzU98/TGwHzSsZG5I/AAAAAAAADXk/4d7kFStRme0/youtube.png" /></td><td><a href="LINK-DO-YOUTUBE" target='_blank'><span>Youtube</span> Acompanhe no Youtube</a></td>
</tr></table></div>

<div class="boxsocial">
<table><tr><td><img src="http://lh6.ggpht.com/_UCfxgWHzU98/TGwHhfP8b2I/AAAAAAAADW8/M92OhIzgDqE/myspace.png" /></td><td><a href="LINK-DO-MYSPACE" target='_blank'><span>Myspace</span> Acompanhe no Myspace</a></td>
</tr></table></div>

<div class="boxsocial">
<table><tr><td><img src="http://lh3.ggpht.com/_UCfxgWHzU98/TGwHsuDYdBI/AAAAAAAADXY/BeHuWV7YkhY/technorati.png" /></td><td><a href="LINK-DO-TECHNORATI" target='_blank'><span>Technorati</span> Acompanhe no Technorati</a></td>
</tr></table></div>

<div class="boxsocial">
<table><tr><td><img src="http://lh3.ggpht.com/_UCfxgWHzU98/TGwHW50TCZI/AAAAAAAADW0/nG8IUZaWx4Q/lastfm.png" /></td><td><a href="LINK-LAST-FM" target='_blank'><span>Last FM</span> Acompanhe-nos</a></td>
</tr></table></div>

</div>
<center>
<a style="font-size:60%;text-decoration:none;" href="https://www.mundoblogger.com.br/2010/08/widget-box-de-redes-sociais-na-sidebar.html" title="Instale este widget">Widget by Mundo Blogger</a></center>

Personalizando as cores e os icones do widget:
Se você quiser retirar alguma rede social que consta no codigo, basta apagar o box correspondente a ela. E se quiser acrescentar mais alguma, copie o box de código e cole-o fazendo as edições necessárias do icone,texto e link para rede social que você está acrescentando.
Você pode alterar os icones, basta substituir os endereços das imagens referentes a cada icone. Caso queira substituir os ícones, utilize imagem com tamanho de 64×64.

Uma dica: Se você já Criou uma pagina do seu blog no Facebook, aproveite e inclua o link da sua página neste widget.

Acredito eu que não seja necessário, mas de qualquer forma, vou pedir mesmo assim: Por favor, não retirem os créditos! Afinal eu criei esse box de redes sociais na intenção de ajudá-los, mas tenho total direitos sobre a minha criação.

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn