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

Marcadores: ,