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, pressione Ctrl+F para abrir a janela Localizar do navegador, e 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 e marque a caixa Expandir modelos de widgets, pressione Ctrl+F para abrir a janelaLocalizar do navegador, e 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 e, se estiver tudo certo, clique no botão Salvar modelo.