Como Personalizar os Marcadores do Blog com Efeito Hover | Quero Dicas | Tutoriais para seu blogs


Como Personalizar os Marcadores do Blog com Efeito Hover

Personalizar os Marcadores do Blog com Efeito Hover


Hoje eu trago para vocês 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

Gostou? Fácil, não é? Deixe seu comentário! 
Beijinhos

Me Contrate!


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

Comente. Mais peço que leia antes:

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 xingamentos entre outros, não serão publicados ou respondidos.

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

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

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