Widgets Box Redes
Autor: Juliana Ribeiro | Publicado: 2011-04-12T23:49:00-03:00

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:




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  ]]&gt;&lt;/b:skin&gt;
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:



&lt;div class="boxredesocial"&gt;

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

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

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

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

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

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

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

&lt;div class="boxsocial"&gt;
&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;img src="http://lh3.ggpht.com/_UCfxgWHzU98/TGwHW50TCZI/AAAAAAAADW0/nG8IUZaWx4Q/lastfm.png" /&gt;&lt;/td&gt;&lt;td&gt;&lt;a href="LINK-LAST-FM" target='_blank'&gt;&lt;span&gt;Last FM&lt;/span&gt; Acompanhe-nos&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;center&gt;
&lt;a style="font-size:60%;text-decoration:none;" href="http://www.mundoblogger.com.br/2010/08/widget-box-de-redes-sociais-na-sidebar.html" title="Instale este widget"&gt;Widget by Mundo Blogger&lt;/a&gt;&lt;/center&gt;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 64x64.

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.

Criação e Creditos: Mundo Blogger