Tags Personalizadas

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