- 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='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.
<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, termos de uso do blog no menu.
- Desejando um tutorial é só pedir nos comentários.
- Até mais…
Nenhum comentário:
Postar um comentário
Você leu um artigo escrito com grande dedicação. Gostou? !
Comente, críticas e sugestões, são importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Obrigado pela visita, volte sempre. Inscreva-se e receba novidades.