Personalizar o Link ou usar Imagens no Hack Resumo da Postagem (Leia mais)

Praticamente todos os blogs usam o hack leia mais ou continue lendo para mostrar o resumo da postagem no blogger para deixar o blog mais rápido para carregar e aumentar o numero de pageviews, mas podemos personalizar esse texto do link do resumo da postagem ou até mesmo usar uma imagem no lugar dele para achar mais atenção dos visitantes e melhorar o layout e aparência do blog. Mas caso esteja procurando sobre alterar o link da postagem veja nesta dica sobre mudar endereço das postagens.

Trocar o Texto do Link Leia mais do Blogger

Se estiver tudo certo no seu template (HTML do blog) você só precisa entrar na pagina layout e clicar para editar as postagens do blog para modificar esse texto do resumo da postagem.

Personalizar o link do resumo da postagem

Modificar Hack Leia mais: Trocar o texto ou colocar imagem

O primeiro passo é ter uma imagem para utilizar então veja aqui como criar e editar imagens online. Depois que tiver a imagem pronta e hospedada entre na pagina editar HTML, marque a opção expandir modelo de widgets e procure pelo trecho: <data:post.jumpText/>

Então você pode apagar esse trecho e escrever o que desejar no lugar. Mas se preferir colocar uma imagem no lugar do link leia mais então coloque esse código:
<img style="float:right" src="endereço da imagem" border="0" />
No lugar onde está <data:post.jumpText/>, mas colocando um endereço de imagem no local indicado, veja aqui sobre problemas com imagens e também hospedar imagens no Blogger.

Além disso o código tem a parte style="float:right" que faz a imagem ficar do lado direito se quiser do lado esquerdo troque a palavra right por left, mas se preferir a imagem centralizada então troque o float:right por text-align:center;margin:auto.

Aproveite e veja também:
Formatação Especial nos Textos das Postagens
Achar e Resolver Problemas com Códigos HTML no Blog

Esperamos que gostem dessa dica que é simples de fazer e pode ajudar a mudar o visual do seu blog e assim conquistar mais visitas para seu blog.

47 comentários :

  1. Fabiano, me desculpe te incomodar, eu gostaria de fazer com você uma entrevista, no mesmo formato dessa aqui: http://www.docesonhodemenina.com.br/2012/07/EntrevistaDSMDanny-Curiosidades.html
    Se você estiver interessado, me responda com seu e-mail (para que eu possa enviar as perguntas) nesse formulário: http://www.docesonhodemenina.com.br/p/contato.html
    Se não aceitar, ignore esse comentário.

    Mil Sweetkisses ♥

    ResponderExcluir
  2. Sheila Lima será um prazer participar e responder suas perguntas.

    ResponderExcluir
  3. Sei que esse não é o post certo pra perguntar isso, mas, queria saber, como colocar pra, automaticamente, ao publicar uma foto no meu blog, ele adicionasse aquela espécie de crédito, pra mostrar que ela passou pelo meu blog. Tipo, eu publico uma foto, e automaticamente, ele adiciona na lateral esquerda inferior da foto, uma imagem determinada por mim, que divulga o meu blog.

    ResponderExcluir
  4. Barracão do Humor tem o gadget de posts recentes mas não é especificamente para fotos.

    mas tente explicar melhor o que está querendo fazer

    ResponderExcluir
  5. Tipo, quando você publica alguma postagem, qualquer um pode pegá-la e dizer que é dela, mas, se a postagem tiver a marca de meu blog, dá para saber que fui eu quem fiz. E tipo, pra não precisar ficar editando cada foto para colocar a minha marca, eu queria um que fosse automatico. Tipo oq vocês usam em suas fotos, ele ficam com a marca de seu blog sobre a imagem, que fica DICASPARABLOGS.COM.BR
    Mas eu não quero ficar tendo que editar cada foto para colocar a minha marca, eu quero um código que coloque sozinho, assim que eu publicar qualquer foto

    ResponderExcluir
  6. mas imagens que publico escrevo sobre elas na hora de editar a imagem antes de enviar para o blog.

    acho que não tem código automatico para isso

    ResponderExcluir
  7. olá fabiano, estou com um problema no meu blog: tendo mudar o plano de fundo e não consigo, sempre me dá a imformaçao de que "NÃO É COMPATÍVEL COM ESTE MODELO" me ajude por favor

    ResponderExcluir
  8. Renata Gomes está tentando alterar por qual pagina? design do modelo? se o seu template for mais antigo tem que alterar pela pagina editar html

    ResponderExcluir
  9. Fabio eu gostaria de saber como faco para organizartemas ou titulos do meu blog, colacar cada assunto no seu devido lugar por exemplo.
    Colocar um tema como adsense, se alguem clicar naquele tema sair todos os temas relacionado com adsense
    www.sansi-boy.blogspot.com

    ResponderExcluir
  10. Sansaomachava você organiza suas postagens com os marcadores, veja aqui:
    Colocar Marcadores no blog

    ResponderExcluir
  11. Fabiano eu faço assim publico uma imagem e um video a imagem serve com exemplo e o video só dá para ser visualizado depois que clicar no hack leia mais o problema é que os meus videos começam reproduzir automaticamente e não posso deixar eles na pagina inicial por isso coloco as imagens mais como posso deixar somente o video quando clicar em leia mais e não o video e a imagem acima do video ? tipo publico o video e uma imagem do video par o pessoal ter uma noção mais na pagina interna da postagem a imagem apareçe acima do video tem como deixar somente o video ?

    ResponderExcluir
  12. o hack leia mais não mostra miniatura do video.

    vai precisar da imagem na postagem

    ResponderExcluir
  13. Fabiano, quando posto uma imagem e depois um texto, o Hack leia mais aparece certo (com a imagem) mas a imagem vai diminuir ?
    By: Vih

    ResponderExcluir
  14. a imagem só diminui no hack leia mais

    mas na postagem ela fica no tamanho original.

    ResponderExcluir
  15. Fabiano eu não consigo achar o trecho "" no meu tamplate. Já usei Cntrl+F e marquei e desmarquei o "Expandir Modelo de Widgets", mas não encontra. Aonde que posso inserir, de uma forma mais segura, o hack? Obrigado ;)

    ResponderExcluir
  16. esse resumo da postagem tem que ser na pagina editar html.

    mas ele não é automatico precisa inserir a quebra de pagina em cada postagem

    ResponderExcluir
  17. Não deu certo presiso de ajuda , add ? Stefany_siiqueira@hotmail.com

    ResponderExcluir
  18. Jully Stefany talvez tenha usado o endereço errado da imagem por isso não apareceu.

    veja aqui: Imagem não aparece no Blog ou Site

    ResponderExcluir
  19. Fabiano, Não consegui achar o trecho dentro do meu HTML, pois é um template de internet (Não é padrão do Blogger) quero saber se tem outro lugar no HTML que eu consiga mudar a mensagem para uma imagem. Obrigado ;)

    ResponderExcluir
  20. Fabiano, Coloquei a imagem e pegou legal, mais agora quero mudar, por que não ficou muito boa, só que não acho mais o código.. ajuda aê. vllw ;]

    ResponderExcluir
  21. Tailan tem que marcar a opção expandir modelos de widgets para achar.

    tente procurar pelo endereço da imagem

    ResponderExcluir
  22. sempre eu se do de bem aqui nesse site...
    valew
    olhem como ficou: sofilmesoline.blogspot.com

    ResponderExcluir
  23. Gostaria que você me ensinasse por favor como colocar a imagem no lugar de mais informações mais sem modicar o HTML e também como centralizar os "mais informações" pra ficar no meio da pagina e sem modicar o HTML também,aguardo respostas e muitissimo obrigado
    meu email caso queira me enviar a resposta por email estarei aguardando:
    igorroycerezende@hotmail.com

    ResponderExcluir
  24. Igor Royce não tem como fazer sem mexer na pagina editar html.

    o blogger ainda não tem essa opção na pagina layout

    ResponderExcluir
  25. atualiza essa postagem, nao entendi nada pois a interface do blogger mudou e não tem como usar a antiga, espero pela atualização.

    ResponderExcluir
  26. S4M a infterface do blogger continua a mesma deste tutorial. Acho que você se confundiu de pagina

    ResponderExcluir
  27. Olá Fabiano!
    Antes de mais quero agradecer pelas dicas que tem disponibilizado e que me têm ajudado muito a organizar melhor o meu blogue. Tenho até recomendado para vários amigos pois a sua explicação é de muito fácil compreensão.

    Bem, o problema que me trás aqui é que na minha templante (tema) personalizada se eu colocar as quebras de página nas mensagens, o que está a seguir à quebra de página simplesmente não aparece. Como isso torna o meu blog mais lento e com mensagens enormes eu queria resolver isso. Pelo que me pareceu ser o problema, é a falta do texto "" no HTML, porque julgo que a minha pergunta é simples para você: Se eu quiser inserir esse texto na página HTML onde o devo inserir? Julgo faltar só isso para resolver o meu problema.

    Obrigada pelo tempo que me disponibilizar!
    Continuação de um ótimo sucesso para o seu blogue!
    Abraço!

    ResponderExcluir
  28. BeAz Sims talvez tenha algum erro no seu html.

    use nossa pesquisa no final da pagina e achará varios códigos de resumo da postagem então tente comparar com o html do seu blog e corrigir os erros que encontrar.

    se não der certo terá que trocar o template.

    ResponderExcluir
  29. Obrigada Fabiano!

    O problema era mesmo aquele que eu suspeitava.
    Teve de acrescentar o texto:

    < b:if cond='data:post.hasJumpLink' >
    < div class='jump-link' >
    < a expr:href='data:post.url + "#more"' expr:title='data:post.title' >< data:post.jumpText/ >< /a >
    < /div >
    < /b:if >

    antes de:

    < div class='post-footer' >

    Eu sou um leigo nestas coisas mas experimentando lá vou conseguindo.

    Abraços!

    ResponderExcluir
  30. fabiano eu tento colocar a Imagem centralizada e quando coloco o codigo text-align:center;margin:auto no lugar float:right aparece no lado esquerdo meu ajude ai vlw

    ResponderExcluir
  31. Lucas tente usar o alinhamento no trecho do código que faz o link, assim:

    <a expr:href='data:post.url' expr:title='data:post.title' style='display:block;text-align: center;margin:auto'><img src="endereço da imagem" border="0" /></a>

    ResponderExcluir
  32. por fabiano so voce mesmo veio vlw pela dica ajudou 1000 %
    Continue Assim

    ResponderExcluir
  33. Mais uma vez, obrigado meu filho
    Sucesso sempre!

    ResponderExcluir
  34. Só mais um detalhezinho...
    Como centralizar o texto?

    ResponderExcluir
  35. para centralizar tem que usar o código align:center, veja mais detalhes aqui:
    Formatação Especial nos Textos das Postagens

    ResponderExcluir
  36. Valeu cara! Tu é 10!!! Já até personalizei meu blog seguindo as instruções tua.
    Obrigado!
    Tu tens algum canal no YouTube com aulas em vídeos?

    ResponderExcluir
  37. Valeu cara! Você é 10!!! até personalizei o meu blog seguindo tuas instruções.
    Obrigado.
    Você tem um canal no YouTube com algumas aulas em vídeo sobre blog ou Facebook?

    ResponderExcluir
  38. já publiquei alguns vídeos mas faz tempo....

    achei a ideia bem interessante e acredito que vou começar novamente a publicar vídeos no youtube

    ResponderExcluir
  39. Como faço para colocar o "Mais informações »" centralizado ?

    ResponderExcluir
  40. retire o código float:....

    e coloque text-align:center;

    ResponderExcluir
  41. Oi Fabiano,
    Voce saberia me informar como eu coloco "leia mais" ou "continue lendo" nas postagens da Fan Page do Facebook? Nao consigo achar nenhuma informacao na net. obrigada
    Katia

    ResponderExcluir
  42. no facebook acho que isso é automático e não tem como controlar

    ResponderExcluir
  43. Alguém me ajude, estou aprendendo a mexer com html. Quando eu substituo o nome eu não consigo salvar não sei oque tenho que mudar.

    ResponderExcluir
    Respostas
    1. se deu erro na hora de salvar você deve ter apagado algo mais do que deveria.

      qual o trecho de código que você tentou modificar?

      Excluir