Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Widget Vanessa S.

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))
widget box redes sociais

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.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

8 Comentários

  1. Olá, ficou excelente. Parabéns pelo trabalho. Obrigado.

  2. Cláudio Antônio da Silva disse:

    Ficou lindooo.
    Amei
    Parabéns.

    http://claudioantoniodasilva.blogspot.com

  3. .:: Clau ::. disse:

    Obrigada pelos comentários, pessoal! 😉

  4. Luciano Beckman. disse:

    Nossa! Salvou-me! kkk

    Obrigado mesmo!

    Fiquem com Deus.

  5. Clube da risada disse:

    Clau, vc está de parabéns mesmo, já coloquei esse gadget no meu novo blog, muito bonito! Fácil de usar, sempre estive procurando ele, e aqui achei, obrigado!

    Tudo de bom nesse "novo" projeto com o Mundo blogger, irei torcer muito por ele, sorte e muitas alegrias, abração, Brian coimbra!

  6. ::Clau:: disse:

    Ana Karenina
    Vc sabe q a reciproca é verdadeira. Eu tb fiquei muito feliz em ter tido a portunidade de conhecer vc,e de nos tornarmos amigas!=)
    Muito obrigada pelo comentário, amei! *_*

  7. Ana Karenina disse:

    Oi clau

    Vou fazer um comentário nada a ver com o post, me perdoa tá? rs

    quero dizer que adorei o blogcast que você participou, você estava ótima, consegui ouvir completo nesta madrugada, ouvir a "menininha" falando foi muito bom, foi super divertido e aprendi bastante com todos os conteúdos passados.

    pra mim foi um presente maravilhoso ter te encontrado no twitter e ter tido a oportunidade de ver a pessoa maravilhosa que você é, cada dia que passa te admiro mais como profissional e principalmente como pessoa.

    espero que as dificuldades da vida nunca apaguem seu sorriso nem sua meiguice, que elas sirvam de escada para novos conhecimentos.

    Obrigada pelo carinho e amizade.

    e que fique registrado que te adoro viu? rs 😀

    Um grande Abraço 🙂

  8. Poiesis disse:

    Ficou óptimo Clau 😀
    Dá uma vista de olhos…

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.