07 maio 2013

Tags em Caixas Personalizado (Hover)

Olá Cherries, o nosso tutorial de hoje vai estar ensinando como fazer um lindo efeito nos marcadores do seu blog, com efeito Hover ainda! Ideal para aquelas pessoas que tem muitas tags e na sidebar ocupa muito espaço,pois este é pequeninho, ele é facinho e rápido. Quer saber como ele fica ? Veja aqui:


1º. Adicionar o Gadget: Entre em seu blog vá em design elementos da página adicionar um gadget marcadores.
(Nova Interface)
Mais opções layout  adicionar um gadget marcadores.
--> Coloque-o na Opção Cloud  (Caso não saibam, aprendam aqui ) e Salve
 2º Personalizar o HTML: Vá em Personalizar→Editar HTML e procure por ]]></b:skin>, após achá-lo, cole abaixo dele este código:
.label-size span, .label-size a {
color: #000000; /* cor dos marcadores em estado normal */
padding:2px 5px; /* espaço entre os marcadores e as margens, não altere */
margin:2px; /* espaço entre um marcador e outro, não altere */
background: #EEEEEE; /* cor de fundo dos marcadores */
display:inline-block; /* deixa os marcadores em caixinhas, não altere */
font-size:10px; /* tamanho da fonte */
border-radius:10px; /* bordas arredondadas */
}
.label-size span, .label-size a:hover {
background: #000000; /* cor de fundo dos marcadores em estado hover */
color: #EEEEEE; /* cor dos marcadores em estado hover */
}
Altere as cores e o deixe com a sua cara, porém não mude o Display,Margin e Padding.
Se gostarem,podem reblogar, mais não esqueçam dos créditos ^.^ Kissus 

2 comentários:

  1. Amei o tutorial! Estava procurando ele a tempos e não achava. Amei o blog, beijos!
    http://docedemorango-oficial.blogspot.com.br/

    ResponderExcluir