🎨 Substituir "Leia mais" por um botão personalizado

Substituir "Leia mais" por botão personalizado no Blogger

🎨 Substituir "Leia mais" por um botão personalizado

Troque o texto padrão por uma imagem de botão no Blogger — tutorial simples e visual

1 Acesse Modelo

No painel do Blogger, clique na opção Modelo no menu lateral esquerdo.
Modelo Blogger

2 Clique em Editar HTML

Dentro da área de modelo, localize e clique no botão Editar HTML para abrir o código-fonte do tema.
Editar HTML

3 Expanda todos os widgets

Dentro do editor, clique nas setinhas para expandir os grupos de código (widgets). Isso facilita a localização do trecho correto.
Expandir widgets

4 Use CTRL+F para buscar

Clique dentro da área do código e pressione CTRL + F para abrir a barra de pesquisa.
Importante: a pesquisa deve ser feita dentro do código (veja as imagens abaixo).
Correto - pesquisar no código

✅ Correto: a barra de pesquisa aparece dentro do editor de HTML.

Errado - pesquisa no navegador

❌ Errado: a pesquisa está sendo feita no navegador (fora do código). Certifique-se de clicar dentro do campo de HTML antes de pressionar Ctrl+F.

5 Pesquise por jump-link

Na barra de pesquisa, digite jump-link (sem aspas) e pressione Enter. O editor destacará a primeira ocorrência.
Busca por jump-link

6 Substitua o texto pelo botão

O código encontrado será semelhante a este:
<a class='jump-link' expr:href='data:post.url'><data:post.jumpText/></a>
Dentro da tag <a>, localize <data:post.jumpText/> e substitua por uma imagem de botão:
<img src="URL_DA_SUA_IMAGEM" alt="Leia mais" style="border:none;" />
Exemplo: troque <data:post.jumpText/> por <img src="https://exemplo.com/botao-leia-mais.png" />.
Substituir código
Código substituído
💡 Dica: Para um botão mais bonito, você pode adicionar CSS inline ou uma classe. Exemplo: <img src="link" style="width:150px; height:auto; display:inline-block;"/>. Substitua a URL pela imagem do seu botão hospedada em um serviço como Imgur, Blogger, etc.

7 Salve e aproveite

Após realizar a substituição, clique no botão Salvar tema (no topo do editor). Visualize seu blog e veja o novo botão personalizado no lugar do texto "Leia mais".
Seja feliz
⚠️ Importante: Antes de editar, faça um backup do seu tema (clique em "Fazer backup / Restaurar" na página Modelo). Se algo der errado, você pode restaurar a versão anterior.

🎯 Resultado final

Agora, em vez do texto padrão "Mais informações" ou "Leia mais", seus posts exibirão um botão personalizado. Perfeito para dar identidade visual ao seu blog.

Nenhum comentário

Tecnologia do Blogger.