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.

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 + "#more"'><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 + "#more"' 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.

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

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.
Poxa, muito obrigado mesmo [ Dicas para blog ]!!
ResponderExcluirObrigado pela dedicação em torno deste poste!
o modo de fazer é relativamente simples, mas tem muitos detalhes, por isso ficou um tutorial mais longo
ResponderExcluirFabiano muito obrigado por atender meu pedido, por isso que adoro vir aqui. parabéns você é o cara.
ResponderExcluirnem 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
ResponderExcluirOlá!
ResponderExcluirEstou 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/
@Fabiano RobertoPois é, mas graças aos seus ensinos tenho uma noção de HTML.
ResponderExcluirOlha o que eu fiz no meu blog:
http://manollokus.blogspot.com/
Nossa adorei ficou muito bom mesmo, parabéns.
ResponderExcluir@Alessandra você fez alguma configuração no feed do seu blog ou trocou o blog de endereço?
ResponderExcluirse foi pode ser isso, verifique as configurações do feed e também no site do feedbuner
Olá Fabiano!
ResponderExcluirQueria 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
@Ricardo B. no tutorial tem um link sobre resumo da postagem: Mostrar resumo da postagem
ResponderExcluire veja também:
Mostrar Somente os Títulos das Postagens
@Fabiano Roberto Obrigado pelas dicas Fabiano!
ResponderExcluirJá estou checando. :D
Como já estamos em época de Natal, publica um tutorial falando sobre como colocar o gorro do papai noel no logo do blog...
ResponderExcluir@Marcos Vinicius enfeites de natal do tipo que falou tem que ser feito com um programa para editar imagens, não tem código
ResponderExcluirEu 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!
ResponderExcluirDesculpem mas nao sei onde esta o codigo no html?
ResponderExcluirOla 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!
ResponderExcluirCorreia
ResponderExcluirentre 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
Sim isso eu sei mas eu nao encontro o codigo se me puder ajudar agradeço.
ResponderExcluirna pagina editar HTML clique para expandir o modelo de widgets para procurar os códigos
ResponderExcluirOpa 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.
ResponderExcluirO que pode ser ? e como resolver ?
@Eike winchester veja se colocou no lugar certo no html do blog e não apagou nada por engano
ResponderExcluirna maioria das vezes o erro é algum detalhe na hora de copiar e colar o código
muito obrigado!!! super util!!!
ResponderExcluirEu não consegui achar esses links, e agora?
ResponderExcluir@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
ResponderExcluirmas se o seu blog não tiver o código dos botões você pode colocar
Olá Fabiano!
ResponderExcluirDe 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?
deve ter faltado algum detalhe nos códigos
ResponderExcluirO que eu tô usando é o que vem no próprio blogger, em design-páginas. Até ontem funcionava normalmente.
ResponderExcluir@Elis Culceag se já estava funcionando então pode ser erro no carregamento da pagina, tente excluir o historico de internet
ResponderExcluirFabiano,
ResponderExcluirna 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
@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@Fabiano Roberto
ResponderExcluirTeria uma outra opção de botão de compartilhamento apenas para facebook?
Obrigada por responder.
@felicidade clandestina pode usar somente o Botão Curtir e Enviar do Facebook Juntos
ResponderExcluirpuxa Fabiano, quebrei a cabeça pra colocar o botão curtir do facebook e não consegui, vc pode me ajudar? obrigada
ResponderExcluir@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
ResponderExcluirnã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)
Fucionou direitinho . Fabiano Estou começando a blogger tem uns dias e espero continuar no ritmo ,
ResponderExcluiruma 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
JoseFelipeBlogger
ResponderExcluirveja aqui: Botões das Redes Sociais na Vertical - Compartilhar Posts
Vlw pelas dicas,mas to precizando de outa ajuda:
ResponderExcluirNo 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 ^^
CsJogoseDicas
ResponderExcluirveja aqui: Alterar cores dos links - CSS
só precisa usar o estilo font-weight: bold; nos links
Fabiano, como eu coloco o leia mais no meu tumblr?
ResponderExcluirEu 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?
Vitoria B.R.M
ResponderExcluirnão sei muita coisa sobre o tumblr, mas vou pesquisar e fazer um tutorial sobre isso.
Obrigado Fabiano, eu espero a sua resposta!
ResponderExcluirSe 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
Aceita partceria?
ResponderExcluirhttp://oblogdosrebeldesmaniacos.blogspot.com
sobre parcerias veja aqui: Top Parceiros do Blog
ResponderExcluirNão apareceu o google + pode ajudar : http://missaonolar.blogspot.com
ResponderExcluirJose de Ribamar Castro Reis
ResponderExcluirveja aqui:
Colocar Botão +1 do Google no Blog
talvez você não tenha colocado o código completo do botão do google +
Oi Fabiano você não entendeu, eu quero fazer parceria com seu blog!Pra que meu blog apareça nos tops parceros!
ResponderExcluirveja aqui sobre os Top Parceiros do Blog
ResponderExcluirParabéns, post muito bom.
ResponderExcluirUm pouco trabalhoso, mas quando vê o resultado grita: - DUKARALHOOOOOOOO!
muito bom mesmo estav querendo colocar isto um tempão vc e demais mesmo
ResponderExcluirValeu! Funcionou :)
ResponderExcluirfabiano instalei este hack agora como faço para colocar ma imagem no ugar do link ?
ResponderExcluircoloque o código com a imagem neste local: <data:post.jumpText/>
ResponderExcluirnesta parte do código:
<b:if cond='data:post.hasJumpLink'><a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
modifique para ficar assim:
<a expr:href='data:post.url + "#more"'><img src="endereço da imagem" border="0" /></a>
claro colocando o endereço da imagem
Queria saber como aumentar o comprimento dela
ResponderExcluirveja:http://missaonolar.blogspot.com.br/
para mudar o tamanho da imagem precisa usar um programa para editar e criar outra imagem no tamanho certo
ResponderExcluirO tamanho da barra horizontal.
ResponderExcluirJose se aparece barra horizontal no seu blog deve ter algum gadget ou código com width (largura) muito grande.
ResponderExcluirmas é 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
eu fiz tudo certo porem quando clico curtir não aparece no meu face
ResponderExcluirvocê 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.
ResponderExcluirverifique se não apagou nenhum sinal por engano na maioria das vezes é por isso que os códigos não funcionam