Como colocar hack "leia mais" com efeito hover no blog

By Adriana Bentim em 13/01/2022

Tempo de leitura:

• Hoje trouxe mais uma personalização para blogs, você já deve estar familiarizado com o hack "leia mais" do blog, mas você sabia que ele pode ser personalizado de diversas formas?

• Vou ensinar aqui como colocar esse Hack no seu blog, com efeito, hover trocando a imagem toda vez que o mouse passar em cima para abrir a postagem, é um pouco mais detalhado do que a forma simples, mas fica uma graça.
• 
  
• Ao final da postagem deixe algumas imagens se desejar usar é só copiar clicando em cima, elas já estão no tamanho certo e em PNG.

Hack "Leia Mais", com Efeito, Hover

• Relembrando, primeiro faça o backup no seu blog caso de algo errado, mesmo assim se você não tem muita experiência sempre teste a personalização em um blog de teste, eu particularmente prefiro fazer assim.

• Agora vamos então à execução do código, no painel do blogger vá em tema e clique na caixinha  HTMLcaixinha, abriu o painel do blog de um ctrl + f e procure pelo seguinte trecho:

• < div class='jump-link'>

• Apague somente esse trecho e substitua pelo código da personalização.

<p align='center'><a expr:href='data:post.url'><img border='0' onmouseout='this.src=&apos;https://1.bp.blogspot.com/-9RNQ40Qi-k8/XpMzi8pWJ-I/AAAAAAAACC0/PU4MD4GWNNw9D2MFuCvkLy3Vx-Eo2WU2gCLcBGAsYHQ/s1600/leia%2Bmais%2Bcaf%25C3%25A9.png &apos;' onmouseover='this.src=&apos;https://1.bp.blogspot.com/-61-CqWsZD2g/XpMzeZs79oI/AAAAAAAACCw/q9ePB-DvFeM5qalvjXTY3kWSJEgd4nqjgCLcBGAsYHQ/s1600/continue%2Blendo%2Bduo.png &apos;; return true' src='https://1.bp.blogspot.com/-9RNQ40Qi-k8/XpMzi8pWJ-I/AAAAAAAACC0/PU4MD4GWNNw9D2MFuCvkLy3Vx-Eo2WU2gCLcBGAsYHQ/s1600/leia%2Bmais%2Bcaf%25C3%25A9.png '/></a></p></a>

          

• Agora veja como ficou a personalização na demonstração abaixo:

Demonstração do Hack

• Confira o que você pode trocar no código além das imagens é claro, quer mudar a posição da imagem, então troque <p align='center', por:
• 
  
• <p align='right' para ficar a direita
• <p align='left' para ficar a esquerda

• Tome cuidado para não apagar nenhum caractere do código, se não dará erro, ok.

• Agora veja o código sem as imagens, caso você queira optar por outra cor e modelo.

<p align='center'><a expr:href='data:post.url'><img border='0' onmouseout='this.src=&apos;url da imagem1 principal&apos;' onmouseover='this.src=&apos;url da imagem2 com o mouse em cima&apos;; return true' src='url da imagem1 principal'/></a></p></a>

• Note as partes mais escuras do código são onde você deve colocar as imagens escolhidas  e a imagem principal você repete no final imagem1 a primeira url e ultima e imagem2 a que ficará em hover. Tome cuidado na hora de colocar o url da imagem para não apagar nenhuma parte do código.
• 
  
• 
  
• Vou deixar aqui algumas outras opções de imagens que fiz para vocês poderem fazer suas combinações de 'leia mais', elas estão em duplas para combinarem, mas fique à vontade para fazer a sua, todos estão em png e no tamanho certo é só salvar a imagem em seu computador, depois você pode hospedar em seu próprio blog copiar o endereço do link e pronto.

• Por hoje é isso, espero que tenham gostado, se usarem não esqueçam dos créditos e se repostar também qualquer dúvida leia a página, termos de uso do blog  no menu.
• 
  
• Desejando um tutorial é só pedir nos comentários.
• Até mais…

CURTA, COMENTE, COMPARTILHE!