Tags Personalizadas

19:15

Princess  | via Tumblr
Olá Sonhadores tudo bem?
Hoje vim fazer um tutorial de como colocar tags personalizados igual este aqui do blog que eu fiz com a ajuda desses dois tutorias ( www ) ( www ) e dos códigos de borda desse outro blog( www ) ( www )  Juntei os dois e deu esse efeito fofo.
Continue lendo

Essas são as imagens dos tags sem e com o mouse


Primeiro, vá em layout; adicionar um gadget ; e marcadores.
Personalize o marcador igual a imagem abaixo e salve depois.


Depois, vá em modelo; editar HTML; e pesquise por ]]></b:skin> e acima dele cole este código:

/* inicio das Tags personalizadas by sonhando acordada */ 
#Label1 ul li{ 
float: left;
width: 45%;
font-family: 'Dosis', sans-serif; /* fonte, se preferir troque */
font-size: 9px; /*tam. da fonte*/
background: #fff; /*fundo*/
border: 1px dashed #000000; /* borda de baixo do marcador */
margin: 3px;
font-weight: normal;
list-style-type:none;
}
#Label1 ul li:hover{ 
background: #EED2EE; /*fundo hover*/
border: 1px dashed #000000; /* borda de baixo do marcador hover */
-moz-border-radius: 10px; /* Para Firefox */

-webkit-border-radius: 10px; /*Para Safari e Chrome */

border-radius: 10px; /* Para Opera 10.5+*/
-webkit-transition-duration: 3.0s;
}
/* Fim das Tags personalizadas by sonhando acordada */


Tabela de cores aqui 
Agora é só editar de acordo com as cores:
   O laranja é o tamanho da fonte ( na minha opinião fica mais bonitinho quando o tamanho da fonte é menorzinho. Fica mais delicadinho ^^)
   O Verde é a cor do fundo dos tags. Na primeira é do fundo sem o efeito e na segunda é a cor do fundo com o mouse em cima.

     o roxo é o tipo de borda. É só mudar o nome de acordo com a borda que você quiser
Border: 1px solid #000000-> Propriedade: espessura em pixels estilo cor;
não altere a palavra "border".
Borda Solid
Código: Border: 1px solid #000000;

Borda Dotted
Código: Border: 2px dotted #000000;

Borda Dashed
Código: Border: 1px dashed #000000;

Borda Groove
Código: Border: 3px groove #aa3cff;

Borda Inset
Código: Border: 3px inset #aa3cff;

Borda Outset
Código: Border: 3px outset #aa3cff;

Borda Double
Código: Border: 3px double #000000;
ps.: Copiei essa tabelinha do Cherry Boomb visitem esse blog  
Esses acima são os tipos de bordas

     é a cor da borda
     e por fim esse é o tempo de transição para o efeito.

Espero que tenham gostado. Qualquer dúvida comentem que eu respondo
Beijos

Blogueiros encantados

Famenine Place

∞  Lola Mantovani

∞  Blog das Meninas

You Might Also Like

0 comentários

Olá blogueiros! Comentem aqui o que acharam do post, mas há umas regrinhas:
* Nada de comentários ofensivos;
* Há moderação de comentários;
* Coloque o link do seu blog no final do comentário para que possa visitar;
*Se seu comentário for um dos 10 primeiros, o link do seu blog vai para o próximo post na área de blogueiros encantados;

~ DIVIRTA-SE~