Links das redes sociais em forma de menu

Enviar suas postagens para as redes sociais é um bom jeito de divulgar o blog e conseguir aumentar suas visitas, a maioria dos códigos para compartilhar postagens que já vi utiliza imagens, então fizemos esse somente com links de texto de algumas redes sociais e para não ocupar espaço demais colocamos uma barra de rolagem nele.
Para colocar no seu blog entre na pagina editar HTML e coloque esse código logo depois do estilo body{...}, na linha após fechar as chaves do body:

.redes a{
padding:1px;
width: 155px;
text-decoration: none;
display: block;
background-color: #FFCC99;
color: #0000CC;
margin-right: auto;
margin-left: auto;
text-align: left;
border: 1px solid #990000;
}
.redes a:hover{
color: #000000;
background-color: #FFFF99;
border: 1px solid #6699FF;
}

Isso é apenas a formatação dos botões das redes sociais, o código acima poderia ficar em qualquer outra parte junto com os estilos CSS, mas achamos melhor colocar no inicio assim fica mais fácil localizar para futuras alterações de cores, fontes...


Salve as alterações (não adianta visualizar o blog, pois ainda não será possível ver alteração alguma), agora clique para expandir o modelo e procure por:

<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<data:post.body/>

Isso pode variar um pouco dependendo do modelo do seu blog, então no seu blog pode não estar exatamente igual, agora cole esse código logo após o trecho acima:

<br/><div class='redes'><div style='border: 1px solid #000000;overflow:auto; height:130px;width: 180px;margin-right: auto;margin-left: auto;'>
<a expr:href='&quot;http://dihitt.com.br?botao=enviar&amp;url=&quot;+ data:post.url + &quot;&amp;titulo=&quot; +data:post.title' target='_blank'>diHITT</a>
<a expr:href='&quot;http://twitter.com/home?status=&quot;+ data:post.url' target='_blank'>Twitter</a>
<a expr:href='&quot;http://ocioso.com.br/enviarlink.asp?site=&quot;+ data:post.url+ &quot;&amp;titulo=&quot; +data:post.title' target='_blank'>Ocioso</a>
<a expr:href='&quot;http://www.colmeia.blog.br/submit?url=&quot;+ data:post.url' target='_blank'>Colméia</a>
<a expr:href='&quot;http://www.linkto.com.br/site.enviaNoticia.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Linkto</a>
<a expr:href='&quot;http://postsocial.com.br/cgi-bin/ps/recomenda?url=&quot; +data:post.url + &quot;&amp;title=&quot; +data:post.title' target='_blank'>Post Social</a>
<a expr:href='&quot;http://del.icio.us/post?url=&quot; +data:post.url + &quot;&amp;title=&quot; +data:post.title' target='_blank'>del.icio.us</a>
<a expr:href='&quot;http://digg.com/submit?phase=3&amp;url=&quot;+ data:post.url' target='_blank'>Digg</a>
<a expr:href='&quot;http://www.linkk.com.br/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; +data:post.title' target='_blank'>LinkK</a>
<a expr:href='&quot;http://rec6.via6.com/link.php?url=&quot;+ data:post.url + &quot;&amp;titulo=&quot; +data:post.title' target='_blank'>Rec6</a>
<a expr:href='&quot;http://ueba.com.br/NovoLink?url=&quot;+ data:post.url + &quot;&amp;titulo=&quot; +data:post.title' target='_blank'>Uêba</a>
<a expr:href='&quot;http://www.totalnews.com.br/submit.php?url=&quot; + data:post.url' target='_blank'>Total News</a>
<a expr:href='&quot;http://www.domelhor.net/submit.php?url=&quot; + data:post.url' target='_blank'>Do Melhor</a>
<a expr:href='&quot;http://www.linkou.com.br/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Linkou</a>
<a expr:href='&quot;http://digacultura.net/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Diga Cultura</a>
<a expr:href='&quot;http://pigg.com.br/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Pigg</a>
Adicionar ao<br/>
<a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; +data:post.title' target='_blank'>Technorati</a>
<a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=&quot;+ data:post.url + &quot;&amp;title=&quot; +data:post.title' target='_blank'>Google</a>
<a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot;+ data:post.url + &quot;&amp;title=&quot; +data:post.title' target='_blank'>Yahoo!</a>
<a expr:href='&quot;http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; +data:post.title' target='_blank'>Blogmarks</a>
<a href='http://www.blogblogs.com.br/my/gadgets/fave?url=http://dicasparablogs.com.br' rel='alternate' target='_blank'>Blogblogs</a></div><br/></div>

Clique para visualizar o blog e se apareceu corretamente salve as alterações, agora já está tudo pronto. Se quiser botões com outra aparência(cores, fontes..) veja aqui sobre fazer botões e altere a primeira parte do código. Outra coisa que pode ser modificada é onde está height:130px;width: 180px; isso são a altura(130) e largura (180) da caixinha com os botões das redes sociais, você pode alterar como desejar, mas não se esqueça de alterar também na parte do código com o estilo dos botões.

Se achar que essa caixa ficou muito junto das postagens veja que no inicio e final dela aparece <br/> isso uma linha em branco, então é só repetir isso duas ou quantas vezes achar melhor para dar um espaço antes e depois da caixa.

Se quiser nós temos uma pagina com links para enviar suas postagens para diversas redes sociais, no link você poderá ver um exemplo da pagina e como instalar no seu blog.

Veja também:

Sites de música
Aumentar o numero de visitas
Instalar o Google Analytics no blog
Formulario para enviar email em PHP
Colocar efeitos em links

17 comentários:

  1. Muito interessante e prático também.
    Eu gostaria de ter mais segurança, para experimentar! :)

    Abraços
    Luísa

    ResponderExcluir
  2. eu queria que vocês postassem pra mim, ou mandassem pelo e-mail (blog.together@hotmail.com), como colocar no blog a contagem de visitas, é que eu sou iniciante e estou com um pouco de dificuldade.
    Visitem meu bloog, se gostarem mande um e-mail e se possivel me ajudem

    blog: bloggertogether.blogspot.com

    Thanks , kisses <3

    ResponderExcluir
  3. Anônimo
    aqui tem explicações sobre contadores de visitas
    http://www.dicasparablogs.com.br/2009/02/usando-melhor-os-contadores-de-visitas.html

    ResponderExcluir
  4. Fabiano,
    Eu queria saber onde eu coloco o código para ele ficar igual ao seu?

    Obrigado

    ResponderExcluir
  5. em breve vou publicar o código completo, mas o menu está exatamente igual

    ResponderExcluir
  6. Acho que não entendeu a minha pergunta, explicarei melhor.
    Entre quais códigos no HTML voce coloca para aparecer o menu ex:

    data:post.body/
    (todo o código)
    span id='showlink'


    Deste jeito entre quais codigos voce coloca o seu?

    Obrigado

    ResponderExcluir
  7. Gabriel Moura

    é logo de pois de data:post.body que coloca todo o código, claro menos a parte do CSS que é junto com o body{... lá no começo do código

    ResponderExcluir
  8. Mas eu quero que apareça logo depois de artigos relacionados
    como o seu.

    ResponderExcluir
  9. eu admiro seu blog, seu banner ta la no meu, pode apostar que vou visitar bastante aqui
    abração

    ResponderExcluir
  10. Olá Fabiano, obrigado por tantas dicas.
    Meu blog não está aceitando nenhuma mudança no Html, será alguma configuração/?
    abraço

    ResponderExcluir
  11. é estranho acontecer isso, mas não tem configuração para impedir a edição

    ResponderExcluir
  12. Olá Fabiano

    Estou aqui mais uma vez para tirar teu sossego, hehehehe, olha queria colocar queria compartilhar meus posts ou links em forma de menu feito este seu, só q queria colocar o facebook, twitter, orkut, google buzz, email e siga o blog, e tb colocar a mesma frase do teu "Gostou? então divulgue!, o que é bom tem que ser copiado e amei o estilo do teu (queria colocar no final de cada artigo ou só aparecer no final de cada artigo) tem como?

    bjuuuuuus

    ResponderExcluir
  13. Desculpe, mas, não quero em forma de botões, quero como o seu, como está no final deste post, achei lindo e bem prático, sem imagens melhor para carregar, se puder fazer um tutorial como faz este vou te agradecer muito, e acho que a curiosidade não é só minha, é isto, obrigada por sempre ser muito atencioso

    Maysa
    Esmaltes e Ponto

    ResponderExcluir
  14. Não consigo achar o local para colocar o código.
    Dá uma olhada no blog pra ver se me ajuda?
    Agradeço desde já. Ficarei esperando uma resposta. Grande abraço.

    ResponderExcluir