Tagged under:

Marcadores no Estilo Botões

Marcadores2

1º Passo - Alterações Necessárias no Gadget Marcadores 

1º Vá em 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
Assim como Está na Imagem



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

1 - Va em Modelo > Editar HTML

Aperte as Tecla Ctrl+F  e digite esse código ]]></b:skin>

Da forma como está na  imagem a baixo é só acrescentar este código acima da tag ]]></b:skin>
/*Marcadores-Post*/
.post-labels span, .post-labels a{
color: #FFF; /*Cor da fonte*/
background: #D28C96; /*Cor do fundo do Botão*/ 
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*/
}
]]></b:skin>
♦ 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

♦ 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

2ª Opção

Após fazer as alterações na gadget de marcadores como mostrei acima.

»Vá em Modelo » Editar HTML » Clique em Prosseguir » Encontre a tag ]]></b:skin> e cole este ▼ código acima desta tag:

/*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;
}
Aí é só configurar os seus botões com as cores que quiser.

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 Configuração dos marcadores.

Cole o código abaixo acima da  tag ]]></b:skin> e o resultado será igual

/*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;
}
Configure as cores como quiser

Se você não quiser as bordas arredondadas é só tirar as linhas:

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius:3px;
dos códigos CSS dos Marcadores.

E Boa Sorte!

2014 © Truemag
RealMag theme by Templateism