[Blogger - Customização] - Customizando o link “Leia mais” com imagens no Blogger

Olá queridos leitores, neste artigo eu vou esclarecer a dúvida do leitor Rodrigo, que me perguntou como trocar a frase do botão "Leia mais", por uma imagem. Essa prática é bastante adotada por blogueiros que gostam de customizar seus blogs e/ou que possuam templates personalizados — principalmente blogs de humor. Se você não sabe o que é ou não sabe como utilizar o recurso "Leia mais" do Blogger, aconselho que antes de seguir este tutorial, leia este outro artigo que publiquei há um tempo atrás.
Bom, dando início a este tutorial você poderá escolher dentre duas opções de customização: colocar uma imagem como fundo do link "leia mais" ou substituir, literalmente, o link "leia mais" por um imagem — você pode até mesmo usar as duas opções em conjunto, basta ter criatividade e saber como combina-las. Neste artigo eu vou explicar como fazer as duas customizações e você escolhe qual é a melhor para você.

Colocando uma imagem no fundo do link "Leia mais"


1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

]]></b:skin>

3. Imediatamente acima deste código, adicione este outro código.

/* ----- Customização do Leia mais (Jump-break) ----- */
 
.jump-link a:link, .jump-link a:visited, .jump-link a:hover {
    background: url(link-da-imagem) no-repeat left top;
    padding: 5px;
}


Depois de adicionar o código, substitua a parte que foi destacada em vermelho pelo link da imagem que você quer utilizar como fundo do link "leia mais". Note que apenas o fundo do link será alterado, a frase continuará a mesma e em texto plano, ou seja, ainda será possível selecioná-la e copiá-la com o mouse. Caso você queira que a imagem de fundo mude quando o leitor passar o mouse por cima do link, utilize o código abaixo, ao invés do código que foi citado acima.

/* ----- Customização do Leia mais (Jump-break) ----- */
 
.jump-link a:link, .jump-link a:visited {
    background: url(link-da-imagem) no-repeat left top;
    padding: 5px;
}
.jump-link a:hover {
    background: url(link-da-imagem-com-o-mouse-em-cima) no-repeat left top;
}


Você precisará usar duas imagens para fazer este efeito. Você deve substituir a parte destacada em vermelho pelo link da imagem que você quer que apareça no fundo o "leia mais", e a parte destacada em azul, pelo link de outra imagem que aparecerá quando o leitor passar o mouse por cima do "leia mais". Se você quiser, pode colocar uma cor de fundo ao invés de usar imagens — o que eu aconselho fortemente que você faça —, para isto, basta alterar a parte "background: url(link-da-imagem) no-repeat left top;" por este outro código "background: #FFFFFF;". A parte #FFFFFF se refere a cor branca, mas você pode mudá-la para a cor que você quiser.

4. Por fim, clique no botão Visualizar e, se estiver tudo certo, clique no botão Salvar modelo.

Substituir, literalmente, o link "Leia mais" por uma imagem


1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

<data:post.jumpText/>

3. Substitua o código acima pelo código mostrado abaixo.

<img src="link-da-imagem" border="0" alt="Continue lendo"/>

Você deve mudar a parte que foi destacada em vermelho, pelo link da imagem que você deseja utilizar no lugar do link "leia mais". Repare que essa técnica irá substituir o link por uma imagem, ou seja, não será mais possível selecionar o texto do link com o mouse.

4. Para finalizar clique no botão Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo.

Atualização — 17.08.2011 às 12h40
O artigo foi atualizado para refletir mudanças realizadas no painel de controle da plataforma Blogger. O código utilizado para aplicar uma imagem ao fundo do link "leia mais" foi reduzido, o que pode ajudar na redução do tempo de carregamento da página.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 15 comentários neste artigo!

  1. Puta merda, eu estava atrás dessa dica mas não encontrava! Valeu mesmo e mais tarde, quando eu sair do trampo tentarei!!

    Abraços meu amigo!!

    PS: O Internet Explorer é uma merda mesmo. Estou neste instante acessando o seu blog através dele e o blog fica todo desconfigurado...No meu acontece a mesma coisa. As pessoas precisam usar mais o Chrome e o Mozila. Eles sim foram feitos para blogspot.

    Abração!

    ResponderExcluir
  2. Cabeça: que bom que encontrou o que estava procurando. Tenta sim e, qualquer dúvida é só comentar!

    O IEca - como muitos chamam - é realmente uma merda! Sempre testo as coisas (templates, artigos e etc) nos navegadores: Firefox, Google Chrome, Opera e Internet Explorer, e o IE é o único que não fica legal. Essa vontade que a Microsoft tem de querer monopolizar o mercado com seus produtos, e esse orgulho de não adaptar o IE, só traz prejuízo para eles mesmos.

    Eu, prefiro usar o Firefox como navegador padrão, e os outros eu uso apenas para testes mesmo. No seu trabalho não tem como abaixar o Firefox?

    Agradeço a visita e comentário.
    Forte abraço.

    ResponderExcluir
  3. Ter tem mas o nosso pragrama de emissão de bilhetes ( Amadeus ) só presta com a p... do IE :(
    Valeu mesmo e abraço!

    ResponderExcluir
  4. Cabeça: entendi, é uma pena. E também nem faz muito sentido abaixar o Firefox no trabalho se ele não tem nada a ver com o serviço né!?

    Boa sorte com o IE.
    Forte abraço.

    ResponderExcluir
  5. eu fiz tudo certinho eu salvei, normal mais não apareceu a imagem só o link !

    ResponderExcluir
  6. Lucas: visitei seu blog e aqui está aparecendo normalmente!

    ResponderExcluir
  7. nao funciono nao!
    nao apareceu a imagem no blog!
    se com vcs deu certo me expliquem melhor porfavo, por exemplo em que parte vai o link do "continue lendo"(download no meu caso)...
    desculpe qualquer coisa...

    ResponderExcluir
  8. Helisson: não entendi o que você quis dizer com “download”. O artigo foi revisado recentemente, e todos os passos estão corretos! Sugiro que você refaça o tutorial seguindo à risca o que é dito em cada passo! Se o problema persistir, informe o link do blog onde o problema está ocorrendo.

    ResponderExcluir
  9. Oii, então, agradeço pelos codigos, mas, quando fui substituir o texto por uma imagem, ela ficou com uma borda ridicula, tem como mudar isso?
    Agradeço desde já ^-^

    ResponderExcluir
  10. Victor: eu olhei no seu blog e não vi nenhuma imagem no leia mais. Eu utilizo como base para as customizações os templates disponíveis no designer do modelo, como o seu template é customizado, pode haver algum código que adicione borda ao redor da mesma, mas eu teria que ver como é essa borda. Se possível tire um print para eu ver, ou altere no seu blog e comente indicando o link!

    ResponderExcluir
  11. Aii! Eu estava apanhando com uns outros que havia achado, mas com esse deu certinho na hora.
    Só estou tentando centralizar a imagem agora, é possível?
    Obrigada!! (:

    ResponderExcluir
    Respostas
    1. Olá Jéssica, fico feliz em saber que o artigo tenha sido útil! Quanto a sua dúvida, veja que no mesmo lugar em que você adicionou o link da imagem, haverá um código como este: <div class="jump-link">. Você deve adicionar o seguinte atributo dentro dele: align="center". Seu código ficará como o mostrado: <div class="jump-link" align="center">. Isso fará com que a imagem apareça centralizada. Qualquer dúvida, é só comentar novamente. Eu que agradeço a visita e o comentário, volte sempre.

      Excluir
    2. Prontinho!! Adorei *---*
      Valeu mesmo (:

      Excluir
    3. Que bom que conseguiu! Agradeço a visita! (:

      Excluir
  12. E ae Igor,no meu blog funciona certinho!mas quando se clica no leia mais,o link leva a pessoa para o final da postagem e para mim seria mais interessante que o link "leia mais" levasse para o topo da postagem(pois tenho anuncios adsense abaixo do titulo do post)no começo,onde o leitor pudesse ver os anuncios antes.

    Sabe como posso linkar o leia mais no começo do post ?

    ResponderExcluir