Marcadores personalizados com estilo etiqueta para blog

janeiro 05, 2016

Pessoal vou ensinar como colocar aqueles marcadores que dão efeito de plaquinhas, tags de preço, etiquetas ou como vocês quiserem chamar. Fica muito bonitinho no blog. Vou disponibilizar o código em 3 cores, escolham o código que vocês mais gostarem e copie. Ah e para copiar use o CTRL + C pois o blog bloqueia o uso do botão direito do mouse.

Passo 1 - Vá em painel do blogger >> Modelo >> Editar HTML e procure por ]]></b:skin>


Copie abaixo o código correspondente ao modelo que você mais gostou e cole logo acima de ]]></b:skin>

Modelo 1
/*Nuvem de marcadores coloridos por Deixei Florir
---------------------------------------------------*/
.label-size{
margin:0;
padding:0;
position:relative;
}
.label-size a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:14px;
font-weight:bold;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#FF1493;
color:#FFF;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}
.label-size a:before{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #FF1493 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.label-size a:after{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#FFF;
-moz-box-shadow:-1px -1px 2px #FFFAFA;
-webkit-box-shadow:-1px -1px 2px #FFFAFA;
box-shadow:-1px -1px 2px #004977;
}
.label-size a:hover{background:#CCC;}
.label-size a:hover:before{border-color:transparent #CCC transparent transparent;
}    
/*--- fim do código-----*/

Modelo 2
/*Nuvem de marcadores coloridos por Deixei Florir
---------------------------------------------------*/
.label-size{
margin:0;
padding:0;
position:relative;
}
.label-size a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:14px;
font-weight:bold;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#6495ED;
color:#FFF;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}
.label-size a:before{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #6495ED transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.label-size a:after{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#FFF;
-moz-box-shadow:-1px -1px 2px #FFFAFA;
-webkit-box-shadow:-1px -1px 2px #FFFAFA;
box-shadow:-1px -1px 2px #004977;
}
.label-size a:hover{background:#CCC;}
.label-size a:hover:before{border-color:transparent #CCC transparent transparent;
}  
/*--- fim do código-----*/

Modelo 3
/*Nuvem de marcadores coloridos por Deixei Florir
---------------------------------------------------*/
.label-size{
margin:0;
padding:0;
position:relative;
}
.label-size a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:14px;
font-weight:bold;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#000;
color:#FFF;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}
.label-size a:before{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #000 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.label-size a:after{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#FFF;
-moz-box-shadow:-1px -1px 2px #FFFAFA;
-webkit-box-shadow:-1px -1px 2px #FFFAFA;
box-shadow:-1px -1px 2px #004977;
}
.label-size a:hover{background:#CCC;}
.label-size a:hover:before{border-color:transparent #CCC transparent transparent;
}   
/*--- fim do código-----*/

Visualize e se estiver tudo ok, salve. Fácil né ?!

Compartilhe esse post:

  1. Adorei o post e seu blog <3
    mas não consigo copiar o código :(

    Meu Blog: Flanguita.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Ué, mas por que ? Eu copiei aqui tá tudo ok. O blog só bloqueia o uso do botão direito do mouse, mas o ctrl c ta funcionando.

      Excluir
  2. Adorei o post e seu blog <3
    mas não consigo copiar o código :(

    Meu Blog: Flanguita.blogspot.com.br

    ResponderExcluir
  3. Deu super certo e eu ameiii. Copiei o terceiro porque meu blog tem estilo P&B <3

    ResponderExcluir
  4. Tentei colocar o segundo e todas as configurações deram certo (até a fonte mudou) mas não apareceu a etiqueta azul :/

    ResponderExcluir