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 a execução do código , no painel do blogger vá em tema e clique na caixinha HTML , 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 F.A.Q , aqui do blog .

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