Como 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 ♥

Compartilhe