04 maio 2020

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



personalização do hack "leia mais"



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

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

Depositphotos [CPS] WW

2 comentários:

  1. Oi Adriana!
    Fui 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

    ResponderExcluir
    Respostas
    1. Oi Milena
      Desculpe 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.

      Excluir

Você leu uma postagem escrita com muito amor por mim Adriana autora do Baú da Dri. Gostou?! Deixe seu comentário, criticas e sugestões, elas são muito importantes para o blog crescer e melhorar. Curta, compartilhe, ajude o blog a crescer.
Sua mensagem será respondida o mais breve possível .
Muito obrigada pela visita e volte sempre.

Atualizações do Instagram