Como colocar efeito hover no link - Blogger

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)

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

Aproveite e leia também:
COMO PERSONALIZAR BOTÃO ''LEIA MAIS'' DO BLOGGER: VERSÃO CSS
COMO PERSONALIZAR LINK, NEGRITO, ITÁLICO E SUBLINHADO DO BLOG

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