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...

Leia +

Labels p/ sidebar

► 0

► labels vários

► Cartita

Aplicár open/close nas categorias

Aqui eu de novo trazendo mais uma partilha. É isso ai como a imagem acima mostra vamos aplicár ás labels/etiquetas esta forma open/close. Mas pode visualizár online:ENTRE AQUI:

É bem simples de aplicár no seu blog,vamos lá´´

Antes de tudo faça 1 cópia do seu template...

Entre em seu  template e adicione gadget labels/etiquetas/categorias,em forma de lista``

 Agora entre em modelo/html e procure este código/trecho´´

]]></b:skin>

E acima dele coloque este meu``

}
#catbt{background:#fcfcfc;width:310px;color:#000;font-family:Serif;display:inline;padding:3px 2px 2px;margin:3px;
}

Metade está feito agora vamos procurar trecho tipo este``

<div id='sidebar-wrapper'>

Atenção que muda consuante o template temos encontar este trecho``

      <b:widget id='Label1' locked='true' title='categorias' type='Label' visible='true'>

Id das suas etiquestas/labels pode ser outro, vamos encontra o código e trocar``

Exemplo do meu trecho,deixe a setinha fechada e sublinhe esse seu código e troque pelo meu``

        <b:widget id='Label1' locked='true' title='categorias' type='Label' visible='true'>
  <b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
 <select class='postform' id='catbt' name='cat' onchange='location=this.options[this.selectedIndex].value;'>
<option>Escolha Categorias</option>
<b:loop values='data:labels' var='label'>
   <option expr:value='data:label.url'><data:label.name/>
      (<data:label.count/>)
   </option>
</b:loop>
</select>
</b:includable>
</b:widget>

Feito isso visualize como está ,abaixo deixo detalhes código``

• background:#fcfcfc; Côr da caxinha/box/fundo
• width:310px; Largura caixinha/box
• color:#000; Côr da letra
• font-family:Serif; Fonte/letra

Feito e entendido ,está pronto e suas labels/categorias estão com uma nova cara.
Alguma duvida deixe recado,Fuiiiiiiii...

Leia +

Aplicár open/close nas categorias

► 0

► dicas labels vários

► Cartita

Etiquetas de formato menu

Aproveitando o bocadinho de tempo livre ,e trago umas novas etiquetas para sua sidebar...
São etiquetas estilo menu com efeito hover na borda e na letra do texto...
Como pode visualizár na imagem acima este é resultado finál.
Não tenho pra visualizárem online porque onde eu testei foi num blog que estou criando para template de download...
Vamos lá aplicár as etiquetas...

Antes de tudo faça uma cópia do seu template...

Entre em modelo  e depois editar html e procure este código...


]]></b:skin>

E acima dele coloque este ...

}
#Label1{font:14px Oswald;padding:0;margin:0;text-shadow:1px 1px 1px #fff;}
#Label1 li{background:#32cd32;position:relative;padding:0;border:1px solid #444;0-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}
#Label1 ul{list-style:none;padding:0;margin:0}
#Label1 li a{display:block;min-height:28px;line-height:28px;margin:0;padding:0 5px 0 20px;text-decoration:none;color:#eeb111;font-size:14px;border-right:6px solid #eeb111;cursor:pointer;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out}
#Label1 li a:hover{border-right-color:#b5ccf8;text-decoration:none;color:#ddd;
}

Notas: para mudar cor fundo mude ,troque isto; #32cd32
           para mudar a cor da borda troque isto; #eeb111
           para mudar hover da borda troque isto; #b5ccf8

E foi isto que vim partilhár ,até+ agora indo talvez logo traga umas etiquetas como as minhas aqui best-tuga...abc a tds.

Leia +

Etiquetas de formato menu

► 1

► labels vários

► Cartita

Etiquetas com hover v:2

Uma outra forma colocar labels no css .Eu trouxe aqui um código de etiquetas para o blog .
Como a imagem acima mostra um botão normal e outro em hover .
Mas pode ver online ;  Veja exemplo aqui...
Como colocar bem simples vá em páinel no seu blog e depois modelo e click editar html.
Agora vai encontrar este código:

E abaixo dele cole este meu código;

<style type='text/css'>
.Label a{  
    padding-left:20px;
    background:#03c0fe;
    padding:0 20px;
    color:#fc0380!important;
    border-radius:4px;
    -moz-border-radius:100px;
    height:25px;
    line-height:25px;
    text-transform:uppercase;
    text-decoration:none;
    border:DOUBLE !important;
    -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
    float:left;
    margin-left:5px;
    margin-top:5px;
    font-size:11px;
    text-decoration:none !important;
    font-family: &#39;Oswald&#39;, Arial, Helvetica, sans-serif !important;
    letter-spacing: 1px; }
.Label a:hover{
    color:#039efc !important;
    background:#ff008c; }
</style>

Simples e nos marcadores irá escolher em nuvem.
Agora para esconder a chave que aparece na sidebar peque este código abaixo e coloque acima da imagem sublinha a vermelho.

Espero ter ajudado foi esta a partilha que trouxe ,duvidas disponha um bem aja

Leia +

Etiquetas com hover v:2

► 0

► dicas labels

► Cartita

Labels com hover

Aqui de novo trazendo código bem simples de colocar,já viram exemplo acima ,é isso mesmo labels bem legais com hover na borda .
Tem vários nomes labels,marcadores,etiquetas,tags enfim mas tem tudo haver ,está tudo relacionado mesmo eu acho,se estiver errado alguém que me corriga.
Veja aqui online:  labels aqui
Vamos colocar as labels no blog .

ANTES DE MAIS FAÇA UMA CÓPIA SEU TEMPLATE...

Entre no modelo do seu blog e depois clik html e acima  coloque este código:

}
.label-size a {
text-transform: uppercase;
float: left;
text-decoration: none;
margin: 2px 3px 6px 0;
padding: 3px;
border: solid 1px #999;
border-radius: 1px;
font-size: 12px;
background:#6ccdf0
}
.label-size a:hover {
border: 1px solid black;
border-radius: 3px;
}

Salve depois caso não esteja com gadget de etiquetas ,coloque e escolha onde quer colocar.
Bem foi isto trouxe agora irei trazer outros modelos ,aguarde duvidas disponha sempre,até mais...

Leia +

Labels com hover

► 0

► labels

► Cartita