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 :  

Comentários
1 Comentários

1 comentários:

avatar
admin
segunda-feira, 05 dezembro, 2016 ×

Obrigada, funcionou direitinho!! O único! Beijos

Regina Bomfim fez o primeiro comentário! Comente você também!
Resposta


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por seu comentário e por sua presença!

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.

4 - Comente a vontade, deixe sua opinião, crítique, esclareça suas dúvidas e dê suas sugestões ou dicas sobre o assunto referente à postagem.


Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.

É proibida a reprodução total ou parcial dos artigos deste blog sem autorização|Somente terá o direito de republicar os códigos publicados dando os devidos créditos.