Hack "Leia mais" com efeito hover

Bom dia, amigos leitores!

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?

Hoje vou mostrar para vocês uma das mais simples e que fica no mesmo estilo que tem aqui no blog.

Bora! Lá.

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, do blog  no menu.

Desejando um tutorial é só pedir nos comentários.
Até mais…