Saiba como fazer:  Marcadores "tipo" Botões.  
Autor: Edilene brandao da silva | Publicado: 2013-05-22T23:22:00-07:00







Saiba como fazer: 








Marcadores "tipo" Botões.&nbsp;










1º Passo -&nbsp;

Alterações Necessárias no "Gadget" -&nbsp; Marcadores -

&nbsp;

Logado no painel blogger:

&nbsp;
1º&nbsp; Em&nbsp; "Layout "» Encontre o gadget Marcadores do seu blog clique em Editar e faça as seguintes alterações:

• Em Mostrar Marque ► Todos os marcadores
• Em Classificação Marque ►Em ordem Alfabética
• Em Exibir Marque►Exibir como Could(=Nuvem)
• Desmarque ►Mostrar número das postagens por marcador






2º - Código CSS para os Marcadores como Botões




1ª Opção

... acima da tag ]]&gt;&lt;/b:skin&gt;

&nbsp;só acrescentar este ▼código 

&nbsp;
&nbsp;
/*Marcadores-Post*/
.post-labels span, .post-labels a{ 
color: #FFF; /*Cor da fonte*/
background: #D28C96; /*Cor do fundo do Botão*/&nbsp;
font-size:10px; /*Tamanho da fonte*/
border-radius:5px; 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 
padding:2px 5px; 
margin:2px; 
display:inline-block; 
text-transform:none; 
-webkit-transition-duration: .90s; 
} 
.post-labels span, .post-labels a:hover{ 
background: #FFDDDB;/*Cor do fundo do botão quando passamos o mouse em cima*/
color: #333;/*Cor da fonte quando passamos o mouse em cima*/ 
}
&nbsp;
&nbsp;
&nbsp;

... O marcador deste código está configurado para ficar assim:
MARCADOR

... Quando passarmos o mouse em cima ficará assim:
MARCADOR

... Clique em Visualizar para se certificar que está indo tudo certo.

... Clique em Salvar modelo. 

-&nbsp; Configure os seus botões com as cores que quiser.



»Para aprender como acesse estes links:


... Como identificar cores 

... Site com Cores e seus Códigos para o seu Blog/Site

&nbsp;

&nbsp;

2ª Opção
Após fazer as alterações na gadget de marcadores:

»Vá em Modelo » Editar HTML » Clique em Prosseguir »&nbsp;

Encontre a tag ]]&gt;&lt;/b:skin&gt;&nbsp;
e acima dela

cole &nbsp;
este&nbsp; 
código ▼ 


/*Links Gadget Marcadores*/
.label-size span, .label-size a{ 
color: #C54160; /*Cor da fonte*/
background: #FAE7EB;/*Cor do fundo do Botão*/
font-size:12px;/*Tamanho da fonte*/
border-radius:5px; 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 
padding:2px 5px; 
margin:2px; 
display:inline-block; 
text-transform:none; 
-webkit-transition-duration: .90s; 
} 
.label-size span, .label-size a:hover{ 
background: #FFDDDB;/*Cor do fundo do botão quando passamos o mouse em cima*/
color: #333;/*Cor da fonte quando passamos o mouse em cima*/
border-radius:5px; 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 
}
&nbsp;
&nbsp;
Aí é só configurar os seus botões com as cores que preferir.

♥ O marcador deste código está configurado para ficar assim:
MARCADOR
♥ Quando passarmos o mouse em cima ficará assim:
MARCADOR


3ª Opção

Uma outra opção de&nbsp;
Configuração dos&nbsp;
marcadores:




 acima da &nbsp;tag&nbsp;]]&gt;&lt;/b:skin&gt; ,&nbsp;
Cole o código :


/*Labels
------------------------------------------------------------ */
.Label a{
padding-left:10px;
background:#D2136F;/*Cor do fundo do Botão*/
padding:0 10px;
color:#fff!important;/*Cor da fonte*/
height:26px;
line-height:26px;
text-decoration:none;
border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
float:left; text-align:center;
margin-left:1px;
margin-top:1px;
font-size:13px;/*Tamanho da fonte*/
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius:3px;
}
.Label a:hover{
background:#FF9B98;/*Cor do fundo do botão quando passamos o mouse em cima*/
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius:3px;
}
&nbsp;
&nbsp;
&nbsp;
&nbsp;
fonte:
templatesparavoce





Em relação às&nbsp;

cores,

use

as que

você preferir!













Nenhum comentário ainda.?!






Nome (obrigatório)
▼ 

        
email (não será divulgado *)
(obrigatório)
▼ 

        &nbsp;
seu website*/
 (obrigatório)
Escreva&nbsp;
seu comentário&nbsp;
aqui▼