Barra com Botões Curtir, Google +, Retweet e Hack Leia mais

Recebemos algumas perguntas criar uma barra no final das postagens colocando os botões do Twitter, Curtir do Facebook e +1 do Google ao lado do leia mais (link para ver a postagem completa). Isso parece difícil de fazer, mas é uma simples organização de layout e formatação usando CSS.

Antes de fazer alterações no seu template recomendamos fazer um backup do seu modelo atual assim não correrá riscos de perder seu template no caso de algum erro no código HTML do blogger.
botões das redes sociais no blogspot

O ponto principal deste código é ver qual código você usou para fazer o resumo da postagem no exemplo a seguir vamos utilizar o código que já publicamos e usamos atualmente em nossos blogs:Mostrar resumo da postagem

Entre na pagina editar HTML, marque para expandir o modelo e procure por algo parecido com esse trecho:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><img src="endereço da imagem" border="0" /></a>
</div>
</b:if>

Copie esse código e cole no bloco de notas depois apague do seu HTML (não é preciso salvar por enquanto). Agora coloque esse código na sua pagina HTML no lugar onde apagou o outro, mas antes compare o trecho final que faz o resumo da postagem com aquele que retirou do seu blog.
<div style='background-color: #CCC;border: 1px dashed #000;margin-top:10px'>
<div style='float:left; width:30%'><script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1' type='text/javascript'/>
<div>
<fb:like action='like' colorscheme='light' expr:href='data:post.url' font='arial' layout='button_count' send='true' show_faces='false'/>
</div></div>
<div style='float:left; width:20%'><a class='twitter-share-button' data-count='horizontal' data-via='fabianoroberto' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<div style='float:left; width:15%'><g:plusone expr:href='data:post.url'/></div>
<div class='jump-link' style='float:right; width:30%'><b:if cond='data:post.hasJumpLink'><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</b:if></div>
<div style='clear:both'/></div>

Se o seu código do resumo for diferente então coloque o seu código do resumo da postagem neste código para criar a barra que acabamos de mostrar.
barra com botões no final dos posts do blogger

Para mudar as cores de fundo e bordas da barra no final dos posts do blogger você altera na primeira linha do código:
div style='background-color: #CCC;border: 1px dashed #000;margin-top:10px'

Caso queira você pode apagar a cor de fundo e borda e deixar somente os botões lado a lado. Veja nestes links o Código das Cores e também como Colocar ou alterar as bordas
botões redes sociais no blogger

Além disso, você pode criar um estilo. jump-link para formatar o link leia mais ou até fazer um botão nele então coloque esse código antes da linha body{...}

.jump-link a{background-color: #FFC;border: 1px dashed #000;text-align: center;display: block;}
.jump-link a:hover{background-color: #FF0;color: #000;border: 1px solid #000;}

E veja aqui como Alterar cores dos links - CSS e se tiver dificuldades para achar o lugar certo no html veja: Onde colocar os códigos no blog

Outra coisa que você pode notar no código é que varias vezes repetimos o trecho width:25% apenas com valores diferentes, isso é a largura de cada um dos pedaços da barra no final da postagem, ou seja você pode modificar esses valores como desejar.

Você poderá ver o código em funcionamento em nosso site: Frases Curtas note que ao clicar em qualquer postagens os botões continuam aparecendo na pagina individual de cada postagem mas sem o link leia mais.

Esse nosso código usamos divs para criar uma barra dividida em colunas, portanto ela funciona com qualquer coisa caso queira usar algum outro acessório nela em vez dos botões e o hack leia mais.

Esperamos que gostem de mais essa forma de organizar os botões das redes sociais no seu blog e consiga mais divulgação para seu blog com eles. Abraços e boa semana.

58 comentários:

  1. Poxa, muito obrigado mesmo [ Dicas para blog ]!!
    Obrigado pela dedicação em torno deste poste!

    ResponderExcluir
  2. o modo de fazer é relativamente simples, mas tem muitos detalhes, por isso ficou um tutorial mais longo

    ResponderExcluir
  3. Fabiano muito obrigado por atender meu pedido, por isso que adoro vir aqui. parabéns você é o cara.

    ResponderExcluir
  4. nem li o post kkk, só to passando pra falar q ese blog é um dos melhores e q sempre q preciso d algo para meu blog eu sou redirecionado para esse site pelo google nas buscas

    ResponderExcluir
  5. Olá!
    Estou com um problema no meu blog.Quando é colocado o link na lista de blogs na sidebar de algum outro blog ele direciona para outro blog!O que pode estar acontecendo?Pode me ajudar,por favor?!!
    Meu blog:www.miinteressa.com e ele direciona para esse:http://larissardantas.blogspot.com/

    ResponderExcluir
  6. @Fabiano RobertoPois é, mas graças aos seus ensinos tenho uma noção de HTML.
    Olha o que eu fiz no meu blog:
    http://manollokus.blogspot.com/

    ResponderExcluir
  7. Nossa adorei ficou muito bom mesmo, parabéns.

    ResponderExcluir
  8. @Alessandra você fez alguma configuração no feed do seu blog ou trocou o blog de endereço?

    se foi pode ser isso, verifique as configurações do feed e também no site do feedbuner

    ResponderExcluir
  9. Olá Fabiano!
    Queria saber como faço para exibir na página inicial do blog, apenas um resumo das notícias.

    Também gostaria de saber como coloco, nem sei o nome, mas é uma espécie de slide com notícias, igual vemos no site Omelete!

    Ficarei grato pela resposta!

    :D

    ResponderExcluir
  10. @Fabiano Roberto Obrigado pelas dicas Fabiano!
    Já estou checando. :D

    ResponderExcluir
  11. Como já estamos em época de Natal, publica um tutorial falando sobre como colocar o gorro do papai noel no logo do blog...

    ResponderExcluir
  12. @Marcos Vinicius enfeites de natal do tipo que falou tem que ser feito com um programa para editar imagens, não tem código

    ResponderExcluir
  13. Eu não consegui,você pode me ajudar?onde ta essse primeiro código aí que precisa ser excluí-do?Eu não consegui achar,por favor me ajude!

    ResponderExcluir
  14. Desculpem mas nao sei onde esta o codigo no html?

    ResponderExcluir
  15. Ola Fabiano, é o seguinte na página inicial a barra funciona perfeitamente, mas quando clica na postagem para a parte interna, ela some automaticamente, visita ai pra vc ver www.cruzeirosempre.net, abraço!

    ResponderExcluir
  16. Correia
    entre no painel do blog > modelo, lá tem o link para entrar na pagina editar html

    Julimar Mageste
    você colocou o trecho b:if cond='data:post.hasJumpLink..... dentro do código como mostramos? apagou o outro que já tinha no seu blog? provavelmente tem um código desse tipo sobrando

    ResponderExcluir
  17. Sim isso eu sei mas eu nao encontro o codigo se me puder ajudar agradeço.

    ResponderExcluir
  18. na pagina editar HTML clique para expandir o modelo de widgets para procurar os códigos

    ResponderExcluir
  19. Opa acho que é fabiano né?..Bom eu coloquei o codigo no meu blog e as imagem da barra latera fica por cima da barinha dos botões.
    O que pode ser ? e como resolver ?

    ResponderExcluir
  20. @Eike winchester veja se colocou no lugar certo no html do blog e não apagou nada por engano

    na maioria das vezes o erro é algum detalhe na hora de copiar e colar o código

    ResponderExcluir
  21. @Fã Clube Rebelde Maniacos os trechos de códigos variam conforme o template, tente procurar por trechos do codigo para achar o lugar certo, por exemplo use o ctrl F e procure data:post.hasJumpLink

    mas se o seu blog não tiver o código dos botões você pode colocar

    ResponderExcluir
  22. Olá Fabiano!
    De ontem para hoje o meu botão de +1 sumiu, os outros 5 aparecem, só falta "ele", tanto dentro da postagem quanto no resumo de postagens. O que pode estar acontecendo?

    ResponderExcluir
  23. deve ter faltado algum detalhe nos códigos

    ResponderExcluir
  24. O que eu tô usando é o que vem no próprio blogger, em design-páginas. Até ontem funcionava normalmente.

    ResponderExcluir
  25. @Elis Culceag se já estava funcionando então pode ser erro no carregamento da pagina, tente excluir o historico de internet

    ResponderExcluir
  26. Fabiano,
    na própria ferramenta do blog há os botões de compartilhamento, que são mais de 3 - há para facebook, blog, twitter, etc... o que eu gostaria era apenas o compartilhameto via o facebook - é possível desta maneira?

    Obrigada,
    Jenifer

    ResponderExcluir
  27. @Felicidade Clandestina nos botões padrão do blogger não tem como alterar nada, você só pode escolher se mostra ou não aqueles botões

    ResponderExcluir
  28. @Fabiano Roberto

    Teria uma outra opção de botão de compartilhamento apenas para facebook?

    Obrigada por responder.

    ResponderExcluir
  29. puxa Fabiano, quebrei a cabeça pra colocar o botão curtir do facebook e não consegui, vc pode me ajudar? obrigada

    ResponderExcluir
  30. @Cláudia André esses códigos são cheios de detalhes por isso na hora de colocar tem que ter cuidado para não apagar nada por engano

    não tem como explicar melhor porque na maioria das vezes que um código dá erro é algum detalhe que erramos (apagar algo ou colocar letra a mais)

    ResponderExcluir
  31. Fucionou direitinho . Fabiano Estou começando a blogger tem uns dias e espero continuar no ritmo ,
    uma pergunta Como que coloca os botoês ai ali do canto da tela >
    Queria colocar assim no meu blog. a plantaforma q uso e blogspot. Bom abraço e o dicasblog e muito bom

    ResponderExcluir
  32. Vlw pelas dicas,mas to precizando de outa ajuda:
    No meu blog eu tenho meus marcadores que se passar o mause neles eles ficam gordos as letras eu queria saber como faser isso em meus links,tipo:as letras ta normal dai vo com o mause em cima delas elas tipo fica maior ou gorda e queria saber como faser para on links quero deixar a mesma coisa html (Layout)se alguêm suber me avisa ^^

    ResponderExcluir
  33. CsJogoseDicas
    veja aqui: Alterar cores dos links - CSS

    só precisa usar o estilo font-weight: bold; nos links

    ResponderExcluir
  34. Fabiano, como eu coloco o leia mais no meu tumblr?
    Eu queria colocar a imagem!
    Já cliquei no botão quebradinho e apareceu "Ler mais" qual é o codigo e onde ele tá no html do tumblr?

    ResponderExcluir
  35. Vitoria B.R.M
    não sei muita coisa sobre o tumblr, mas vou pesquisar e fazer um tutorial sobre isso.

    ResponderExcluir
  36. Obrigado Fabiano, eu espero a sua resposta!
    Se for a sua vontade, vá até o meu blog e poste o link do seu tutorial já pronto , pra me avisar!
    http://oblogdosrebeldesmaniacos.blogspot.com

    ResponderExcluir
  37. Aceita partceria?

    http://oblogdosrebeldesmaniacos.blogspot.com

    ResponderExcluir
  38. Não apareceu o google + pode ajudar : http://missaonolar.blogspot.com

    ResponderExcluir
  39. Jose de Ribamar Castro Reis

    veja aqui:
    Colocar Botão +1 do Google no Blog

    talvez você não tenha colocado o código completo do botão do google +

    ResponderExcluir
  40. Oi Fabiano você não entendeu, eu quero fazer parceria com seu blog!Pra que meu blog apareça nos tops parceros!

    ResponderExcluir
  41. Parabéns, post muito bom.
    Um pouco trabalhoso, mas quando vê o resultado grita: - DUKARALHOOOOOOOO!

    ResponderExcluir
  42. muito bom mesmo estav querendo colocar isto um tempão vc e demais mesmo

    ResponderExcluir
  43. fabiano instalei este hack agora como faço para colocar ma imagem no ugar do link ?

    ResponderExcluir
  44. coloque o código com a imagem neste local: <data:post.jumpText/>

    nesta parte do código:
    <b:if cond='data:post.hasJumpLink'><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>

    modifique para ficar assim:
    <a expr:href='data:post.url + &quot;#more&quot;'><img src="endereço da imagem" border="0" /></a>

    claro colocando o endereço da imagem

    ResponderExcluir
  45. Queria saber como aumentar o comprimento dela
    veja:http://missaonolar.blogspot.com.br/

    ResponderExcluir
  46. para mudar o tamanho da imagem precisa usar um programa para editar e criar outra imagem no tamanho certo

    ResponderExcluir
  47. O tamanho da barra horizontal.

    ResponderExcluir
  48. Jose se aparece barra horizontal no seu blog deve ter algum gadget ou código com width (largura) muito grande.

    mas é dificil dizer onde é, veja esse tutorial:

    Como Encontrar Erros nos Códigos do Blog: HTML, CSS, Javascript

    lá vai ajudar a entender o html do seu blog e procurar o problema

    ResponderExcluir
  49. eu fiz tudo certo porem quando clico curtir não aparece no meu face

    ResponderExcluir
  50. você já tinha o código do facebook antes no seu blog? se tiver pode só copiar o mesmo e colocar no lugar do código do botão curtir que mostramos no código.

    verifique se não apagou nenhum sinal por engano na maioria das vezes é por isso que os códigos não funcionam

    ResponderExcluir