Como Personalizar os Marcadores do Blog com Efeito Hover | Quero Dicas Quero Dicas : Como Personalizar os Marcadores do Blog com Efeito Hover

Quero Dicas : Como Personalizar os Marcadores do Blog com Efeito Hover

Como Personalizar os Marcadores do Blog com Efeito Hover

|

Personalizar os Marcadores do Blog com Efeito Hover


Hoje você vai aprender a Como Personalizar os Marcadores do Blog com Efeito Hover. Para quem não sabe o que é "Efeito Hover", saiba que ele é executado quando passamos o "Cursor" do mouse sobre uma determinada área onde há um link existente e o fundo do mesmo muda de cor.

Aplicar este efeito nos marcadores é bastante simples e muito fácil. Vamos ao tuto?
Sempre recomendo: Faça um backup do seu template ao instalar qualquer tipo de implementação de códigos dentro do HTML do seu blog e claro, dê preferências a um blog de teste! Caso não saiba fazer Backup? Não tem problema, clique em: Como fazer um Backup ou restauração do seu blog.

     Passo 1

Vá em primeiro lugar colocar os marcadores em seu template, para isso siga:

Layout > Adicionar Gadgets > Marcadores >
• Faça as alterações indicadas na foto abaixo e salve
• Coloque ele no local de visualização de sua preferência.



     Passo 2


• Vá em Modelo e Editar HTML
No Editor de HTML do seu blog, clique CTRL + F e procure por: ]]></b:skin>

 ]]></b:skin> 
 


Após encontrar a Tag  ]]></b:skin>, acrescente o seguinte código, logo acima dela. 

.label-size span, .label-size a {
  color: #000000; /* cor dos textos dos marcadores em estado normal */
  padding:2px 5px; /* espaço entre os marcadores e as margens, não altere nada */
  margin: 2px; /* espaço entre um marcador e outro, não altere */
  background: #FF69B4; /* cor de fundo dos marcadores */
  display:inline-block; /* deixa os marcadores em caixinhas, não altere */
  font-size: 14px; /* tamanho da fonte */
  border-radius: 5px; /* bordas arredondadas */
  }
.label-size span, .label-size a:hover {
  background: #FF1493; /* cor de fundo dos marcadores em estado hover */
  color: #000000; /* cor dos marcadores em estado hover */
  }

 
Faça as alterações necessárias de acordo com sua preferência e Pronto! 

IMPORTANTE

Quando você personalizar seus marcadores não altere
padding :2px 5px; 
margin: 2px;

Para alterar as cores veja aqui - Tabela HTML

Beijinhos

Me Contrate!

Compartilhe


Um comentário:


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço!

Apenas peço que leia:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com palavras de baixo calão, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

Beijinhos ♥

Amigos do Blog

agenda dos blogs Universo das Dicas

Ganhe Visitantes | Inscreva-se!

GeraLinks Linkicha Atoananet Linkirado
subir