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='https://1.bp.blogspot.com/-9RNQ40Qi-k8/XpMzi8pWJ-I/AAAAAAAACC0/PU4MD4GWNNw9D2MFuCvkLy3Vx-Eo2WU2gCLcBGAsYHQ/s1600/leia%2Bmais%2Bcaf%25C3%25A9.png '' onmouseover='this.src='https://1.bp.blogspot.com/-61-CqWsZD2g/XpMzeZs79oI/AAAAAAAACCw/q9ePB-DvFeM5qalvjXTY3kWSJEgd4nqjgCLcBGAsYHQ/s1600/continue%2Blendo%2Bduo.png '; 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.
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…
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='url da imagem1 principal'' onmouseover='this.src='url da imagem2 com o mouse em cima'; 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…
Oi Adriana!
ResponderExcluirFui tentar colocar no meu blog, mas o último "< /a >" do código fica conflitando com o "< /b:if >" que aparece algumas linhas abaixo e não sei como resolver :(
Help me
Oi Milena
ExcluirDesculpe a demora,vc conferiu se não ficou faltando nenhum detalhe do código?
Se não for esse o problema pode ser o modelo do seu template, nesse caso eu precisaria saber qual template vc está usando para resolver o conflito ou te passar outro código.