Personalizar o link "Leia Mais"

Se você utiliza esta função sabe de sua importância tanto para economizar espaço, melhorar a exibição de sua pagina, chamar a atenção do leitor para mais posts e gerar maior trafego em seu Blog, porém talvez o link "Leia Mais" não esteja chamando a atenção devida, Vamos ver agora como personalizar o Link "Leia Mais" mudando o texto e até mesmo acrescentando uma imagem em seu lugar.


Personalizando o link "Leia Mais"

1. Se você pretende mudar apenas o que esta escrito no link, vá até "Layout" e siga as imagens abaixo:




Na janela seguinte altere o texto no local indicado na imagem:



2. Salve e veja o resultado.

Adicionando imagem no Link "Leia Mais"

1. Para substituir o link "leia mais" por uma imagem, primeiramente você deve criar a imagem e depois hospeda-lá na internet.

2. Agora vá até "Layout" > "Editar Html" e marque a opção "Expandir modelos de Widget" e procure pelo código abaixo:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >
3. Substitua a parte em vermelho pelo código abaixo:
<p align='right'><a expr:href='data:post.url'><img src='URL_da_IMAGEM'/></a></p>
4. Onde está em vermelho deve ser substituído pelo Url da imagem que você criou e hospedou na internet.

5. Salve o modelo e veja o resultado!

Se você ainda não utiliza esta função, saiba como adiciona-la agora:

Pode lhe interessar:

49 comentários:

  1. Eu prefiro o post na página interia, quando tem o "leia mais" parece que quebra o clima da leitura, eu pessoalmente não gosto.

    ResponderExcluir
  2. Eu concordo com Judeu, mas por falar em organização, é uma boa vantagem.

    ResponderExcluir
  3. depende o tipo de Blog, tem Blogs que esta função não se encaixa bem mesmo, e esta função pode ser usada apenas nas postagens que achar melhor.

    ResponderExcluir
  4. Bom... eu tbm prefiro o post completo na página , mas ... é uma boa solução pra quem quer um blog mais organizadinho e o post é muito grande ...

    ResponderExcluir
    Respostas
    1. Ai Como que eu fasso issu botar o leia mais ?

      Excluir
    2. Ai eu te paso meu blog ai depois agente se falar pra voc botar o leia mais pra que não tou conseguindo Ta Ok ?

      Excluir
  5. Mto boa dica.

    Parabens pelo post.

    Adriano Luz

    ResponderExcluir
  6. Muito legal a dica!

    Fiz um botãozinho bem siples e usando o código funcionou perfeitamente!

    Torna mais atrativo clicar em "Leia Mais" ^^

    ResponderExcluir
  7. O problema é que o botão personalizado do "Leia Mais" ficou no lado direito da postagem. Era pra ter ficado do lado esquerdo!

    http://windowsandgames.blogspot.com/

    Como faço para corrigir esse probleminha ? Alguma idéia ?

    ResponderExcluir
  8. Vejam meu blog!!! http://bit.ly/hightechnews Obrigado!

    ResponderExcluir
  9. valeu, ta nos meus favoritos =D

    due resultado mesmo olha ai:
    http://mileumabesteirinhas.blogspot.com/

    ResponderExcluir
  10. Brigado mano tava precisando disso rsrs , okok fui belo site ok

    ResponderExcluir
  11. Adorei, mudei lá no meu blog... Ficou bem melhor.

    Obrigada, colega!

    ResponderExcluir
  12. Cara, era exatamente isso mesmo que eu tava querendo, tanto colocar um botão quanto deixá-lo no canto direito. Tá funcionando perfeitamente. Muito obrigado.

    ResponderExcluir
  13. isso ai e mais usado para filmes online xD e serviu mto pra mim VLW

    ResponderExcluir
  14. Perfeito, salvou minha pele hahaha, era o que eu tava procurando, tá de parabéns seu blog

    =============//=============

    E para aqueles que não gostam muito desse estilo de post...

    Recentemente fiz uma enquente em um blog meu sobre o assunto perguntei para os visitantes o que eles preferiam, Postagens COM OU SEM RESUMO

    Bom a enquete durou 7 dias teve pouco mais de 300 votos, 68% prefere com o RESUMO =D
    e como eu faço meus blogs ao gosto dos visitantes...

    se fosse fazer com base apenas no meu gosto, meu blog seria todo preto e com a foto do Slipknot de fundo hahahahaha

    Abraços.

    ResponderExcluir
  15. Muito bom deu certo aki!!

    Mas me ajuda em algo, eu queria tirar o efeito de link da imagem, tipo do games max, elite dos filmes, sabe me dizer como?

    ResponderExcluir
  16. O seu blog tb está sem esse enfeito, como faço?

    ResponderExcluir
  17. Valew... depois de apanhar um bocado por ai.... finalmente consegui...!

    Valews...pela ajuda..!

    warezando.blogstpo.com

    ResponderExcluir
  18. eae kra, blz?
    Manolo não sei o que ta acontecendo, mas no meu blog quando eu personalizo para imagem, fica a imagem continue lendo em todos os posts -.-
    Responde la igorellik@hotmail.com
    VLW!

    ResponderExcluir
  19. Incrível!!! Nem a designer que eu paguei conseguiu colocar Imagem no Link "Leia Mais" e eu mesma através deste simples e eficaz tutorial consegui. Muito bom! Estão de parabéns.

    ResponderExcluir
  20. Eu prefiro tambem o lei mais, so que eu não consegui instalar, ja tentei varias formas é muito complicado se alguem tiver uma maneir me dê essa dica
    meu blog é o MACUCO NOTICIAS WWW.MACUCONOTICIAS.COM.BR

    RAUDINEY AMARAL

    ResponderExcluir
  21. Tive um problema gallere: não consigo deixar a imagem no centro. O código está certinho e tal.
    Help me

    ResponderExcluir
  22. Muito bom, só aqui consegui fazer certinho. UAHSUAS , gostei.

    ResponderExcluir
  23. Dica ótima! Funcionou perfeitamente: http://www.bovoqui.com . Adorei!

    ResponderExcluir
  24. Oi, eu fiz tdo certinho.. só que não substituiu o escrito normal pelo blog, como eu faço. e como eu coloco centralizado?

    ResponderExcluir
  25. Cara você faz muito tutoriais bons mais continuo dizendo falta o atributo alt nas imagens.
    www.baixarfilmesrmvb.com

    ResponderExcluir
  26. Resumindo o atributo alt nas imagens é muito bom para SEO www.baixarfilmesrmvb.com

    ResponderExcluir
  27. Vix, deu algo de errado no meu e agora todos os titulos de minhas postagens aparecem "Continue Lendo" junto ao titulo.
    www.elitedoapocalipsezumbi.blogspot.com

    ResponderExcluir
  28. O meu deu erro apareceu isso: Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The reference to entity "filename" must end with the ';' delimiter.

    oque eu faço ? espero resposta

    ResponderExcluir
  29. E como eu faço para trocar a posição do "Leia Mais"? Digo, como tirar ele da base esquerda e deixar do lado direito?

    Abraços
    www.zombieway.blogspot.com

    ResponderExcluir
  30. Nossa, só aqui encontrei o que precisava.

    Que blog excelente!

    Muito obrigado.

    ResponderExcluir
  31. qual tamanho fica mais um menos bom para por no blog ?

    ResponderExcluir
  32. meu deus me ajudou bastante 3 tutoriais certinhos seguidos
    parabens para vcs

    ResponderExcluir
  33. No meu blog nao tem isso -.-

    2. Agora vá até "Layout" > "Editar Html" e marque a opção "Expandir modelos de Widget" e procure pelo código abaixo:

    esse codigo abaixo qual é o codigo entao?

    ResponderExcluir
  34. Excelente post, durante esta semana estou fazendo alterações no layout do meu blog e não me lembrava como personalizar o "leia mais". Encontrei outros posts parecidos com este em alnguns blog que sou assinante mas só aqui consegui a informação precisa.

    Parabéns.

    ResponderExcluir
  35. Demais! Obrigada! Estava procurando essa informação faz muito tempo, e você simplificou muito! Obrigada!

    ResponderExcluir
  36. Muito bom mesmo, os dois posts referente ao leia mais>> me serviram perfeitamente, Obrigado !!!

    ResponderExcluir
  37. Estava procurando esse tutorial faz muito tempo, e só agora encontrei um que funcionasse perfeitamente. Para quem não sabe o alinhamento do botão, para colocar a imagem onde tem o código <p align='right' troque o right que esta alinhado para a direita, por left alinhado para esquerda ou center para o centro. Muito obrigado!!

    ResponderExcluir
  38. ucuz ve kaliteli replika telefonlar özellikle bu kategorideki

    ürünlerin gözdesi replika samsung en iyi
    fiyat ve en iyi kalite ile replika telefon her yerden alınmaz.
    seçiminizi replika telefonlardikkatli yapmalısınız çok kaliteli bir replika samsung note 3 istiyorsanız
    yada bir replika samsung note 4 istiyorsanız size gerçeğini aratmayan kalitede
    verebiliriz replika samsung s4
    işte hepsi bukada.replika samsung s5

    ucuz ve kaliteli replika telefonlar özellikle bu kategorideki

    replika telefon
    Lg replika telefon
    replika telefon iphone
    replika telefonlar
    replika telefonlar
    replika saatler

    ResponderExcluir

Todos os direitos reservados © Soluções Blog - Desenvolvido por Gustavo Solbas. Tecnologia do Blogger.