Receba todas as novidades em 2021.

    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…

    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