Como colocar efeito hover no link - Blogger

junho 14, 2020

Como mudar fundo ao passar mouse

Konnichiwaa fadinhas e elfos! Como estão? A pedido de uma leitora aqui do blog vou compartilhar como eu fiz o efeito hover nos meus links, quando é colocado o mouse encima, o fundo muda de cor. Vou mostrar a opção básica e a aprimorada. Quer aprender? Então let's go!

Demorei para trazer pois não tinha certeza se funcionaria em todos os layouts. Mas caso não funcione, deixe seu blog nos comentários que consigo ver como funcionaria no seu okay?

Como colocar efeito hover ao passar o mouse em link (Blogger)


Como colocar efeito hover no link - Blogger

  • 1º opção: Mudança de cor das letras.
Para mudar apenas a cor das letras é só adicionar ou alterar o ''color'' do CSS.

a:hover {
color: #f5d6d1;} /* Link ao passar o mouse */

  • 2º opção: Mudança de cor do fundo.
Para mudar apenas a cor do fundo é só adicionar ou alterar o ''background'' do CSS.

a:hover {
background: #f5d6d1; } /* Link ao passar o mouse */

  • 3º opção: Mudança de cor do fundo com tamanho especifico.
Para mudar apenas a cor do fundo e mexer no tamanho do background precisa utilizar ''border'' e no CSS. Essa é a que eu uso e que sempre me perguntam como faz. Bem meu template não é o básico no Blogger, mas o código que usei foi esse:

a:hover { 
    border-bottom: 1px solid #F5E8EB;
    box-shadow: inset 0 -8px 0 #F5E8EB;
    color: inherit;
    text-decoration: none!important;
    display: inline }


ATENÇÃO: Para funcionar é preciso que vá em Layout, Editar HTML e coloque um dos códigos, acima de /b:skin , onde fica as personalizações do seu blog.

Observações: 
A cor está em código (#f5d6d1) para encontrar a sua cor, veja a paleta de cores aqui:  
Copie e cole no CSS!

Caso você já tenha alguma personalização de link, você precisa encontrar onde está o seu, procure pela cor, ou incorpore a página do seu blog para descobrir o nome. Ao achar você pode alterar nele mesmo, e mantenha o nome da classe!

Se você não achou pode utilizar !important , ao lado da personalização. Isso força o html ler aquele código que precisa ser aplicado.


Por hoje é só, vai ter post toda semana então segue o bloguinho e visite sempre!! | Redes Sociais do Sweet Magic:  Facebook | Twitter | Instagram | Bloglovin | Pinterest * Até mais, Kissus  

Leia também:

3 comentários

  1. Ei Juh, vc sempre com ótimas dicas e tutoriais práticos. Vou tentar esse tutorial e ver se meu layout aceita. Obrigada!!!
    Beijos
    Tamara
    tamaravilhosamente.com

    ResponderExcluir
  2. Oi juh! amei esse tutorial e já vou colocar no meu blog!


    fluffygloww.blogspot.com

    ResponderExcluir
  3. eu ameeeeei, tava a dias procurando por isso, ainda bem que lembrei de procurar aqui <3

    Carol Justo | Justo Eu

    ResponderExcluir