13 janeiro 2022

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

em 13 janeiro 2022

Tempo de leitura:

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


  • 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.



design leia mais

design leia mais

disign leia mais

disign leia mais

design leia mais

design leia mais


  • 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? !
Deixe seu comentário, crítica e sugestão, eles são importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Obrigado pela visita, volte sempre. Aproveite para inscrever-se e receber as novidades.

Confira também, outros artigos: