Labels p/ sidebar

Boa semana, venho com mais um tutorial,partilha. Acima pode visualizár a imagem e resultado final,labels/etiquetas/categorias, para usar na sidebar do blogger.

Caso apague as suas etiquetas ,antes faça 1 cópia do seu template...

Bom vamos lá entre em esquema no seu template adicione uma miniaplicação e adicione etiquetas...

Agora personalize desta forma como está exemplo/imagem abaixo...

Feito isso (guarde) e vamos em modelo aplicár css, procure este trecho...


]]></b:skin>

Agora acima dele coloque este meu código...

/*Etiquetas*/
.sidebar .Label li {
font-family: Oswald;font-weight: 900;font-size: 12px;
line-height: 16px;border: 0 none;color: #666666;  
margin-bottom: 8px;padding: 0;text-decoration: none;}
.sidebar .Label li span {
background: #fcfcfc;border-radius: 0px 5px 5px 0px;color: #666;float: right;
padding: 5px;text-align: center;width: 10%;border: 1px solid #666;
}
.Label li a {
width: 82%;background-color: #666;border: 1px solid #666;border-radius: 5px 0px 0px 5px;
color: #fcfcfc;display: block;float: left;font-size: 12px;line-height: 16px;margin-bottom: 8px;
padding: 5px;text-decoration: none;font-family: Oswald;font-weight: 900;    
}
.Label li a:hover {color: #666;background:#f6f6f6;}

Feito isso visualize...

Nota: agora abaixo algumas coisas pode mudar,personalizar...

(1) font-family: Oswald; fonte da letra  font-size: 12px;  tamanho da letra
(2) background: #fcfcfc; cor fundo  color: #666; cor letra
(3) border: 1px solid #666; cor,espessura,e borda


Agora aqui deixo stylesheet...

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Fui que fui...

Labels p/ sidebar

► 0

► labels vários

► Cartita