Widget Box de Redes sociais na Sidebar


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="http://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.

1 comentários:

  • juca costa says:
    29 de junho de 2014 16:55

    Olá parabéns pelo bom artigo, essas dicas para quem trabalha em casa sempre são ótimas, pois realmente quando estamos trabalhando em casa e muito comum nos sermos distraídos por diversos tipos de distrações e erros prejudicam o resultado do nosso trabalho.
    Gostaria de Deixar um blog abaixo com diversas dicas e variedades: http://www.comoganhardinheiropelainternet.net/

    Um abraço

Postar um comentário

Por favor leia antes de comentar:

1. Escreva apenas o que for referente ao tema;
2. Ofensas pessoais ou spam não serão aceitos;
3. faço parcerias por meio de comentários;
4. Para entrar em contato nosso msn bloggeresites@hotmail.com;
5. Obrigado por sua visita e volte sempre.