Assine nosso Feed


Melhores Dicas para Blogueiros

Passe o mouse e veja qual o assunto do tutorial de cada imagem

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 Related Posts with Thumbnails
Link desta página
Comentários
17 Comentários

17 Comentários:

LL disse...

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

Abraços
Luísa

Anônimo disse...

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

Fabiano Roberto disse...

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

Gabriel Moura disse...

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

Obrigado

Fabiano Roberto disse...

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

Gabriel Moura disse...

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

Fabiano Roberto disse...

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

Gabriel Moura disse...

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

1 Lênin 1 Blog! disse...

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

Alex disse...

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

Fabiano Roberto disse...

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

Profelson disse...

Excelente ferramenta.

Esmaltes e Ponto disse...

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

Fabiano Roberto disse...

veja aqui como fazer Links para divulgar blog no Twitter, Facebook, Orkut, Google Buzz

Esmaltes e Ponto disse...

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

Fabiano Roberto disse...

veja aqui como fazer links de texto para algumas redes sociais

Links para divulgar blog no Twitter, Facebook, Orkut, Google Buzz

Satierf disse...

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.

Postar um comentário