Marcadores parecendo Botões. Saiba como fazer aqui!

Marcadores2Marcadores1

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


Marcadores

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

1ª Opção

Da forma como está na 1ª imagem acima é 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*/ 
}
♥ 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 é esta que fiz no Aukimia:

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.
Marcadores parecendo Botões. Saiba como fazer aqui! Marcadores parecendo Botões. Saiba como fazer aqui! Reviewed by Aurea on 5/21/2013 Rating: 5

11 comentários:

  1. consegui valeu
    otimo blog parabens

    ResponderExcluir
  2. Olá Áurea já estou usando a 2ª opção,ainda bem que tem pessoas como você que se dispõe a nos ensinar,bjs...

    ResponderExcluir
    Respostas
    1. Que bom Lia,
      A segunda opção é fofa, mas ainda prefiro a 3ª opção bem cheguei. Adoro! Uso em meu blog pessoal!
      Um abraço para você!

      Excluir
  3. Bom Dia,
    Queria saber como deixa os botões totalmente quadrados
    não com borda curvada, mas com pontas retas (tem como ?!)

    ResponderExcluir
    Respostas
    1. Olá Kenzo,
      Basta você tirar estas 3 linhas do código CSS dos seus botões:
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius:3px;
      Que seus marcadores aparecerão com as bordas angulares, retas.

      Excluir
  4. Aurea,adorei seu site,não conhecia encontrei ontem no site do Adelson.
    Vou tentar copiar a url das suas imagens,pode?
    Meu site é de crochê,trico...etc
    Adorei seus Templates,apesar de ser blogueira desde 2009,até hoje nunca soube usar Template mínima..rsrs..sempre usei editor atualizado.
    Estou lendo seu Link-me porque realmente eu gostei do site,você pode verna pagina recomendo do meu blog.
    Parabéns,sucesso para vc,bjs

    ResponderExcluir
    Respostas
    1. Olá Graça,

      Quais imagens você quer copiar?
      Visitei seu espaço e vi que já colocou o link-me para funcionar. Ficou ótimo!
      Seja bem vinda ao TPV, espero que você goste a prenda bastante aqui!

      Excluir
  5. Nossa, simplesmente viciada no seu site!
    Ajuda muito!

    ResponderExcluir
  6. Fiz e deu certinho...estou aprendendo muitas coisas aqui. Muito obrigada...

    ResponderExcluir
  7. Já apliquei ao meu blog! Obrigada!
    http://www.meualeatorio.blogspot.com

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.