Como personalizar os marcadores do blog (estilo nuvem colorida)

fevereiro 02, 2016


Pessoal o tutorial de hoje do blog é super simples e deixa um efeito muito bonito. Se trata do menu de MARCADORES que fica na sidebar do blog (essa coluna lateral), esse tutorial vai deixar seus marcadores parecidos com o meu. Uma nuvem de marcadores colorida, Vamos lá?!

1 passo // Vá até o painel do blog >> Layout >> Adicionar um gadget >> Marcadores >> Marque a opção "cloud" que significa nuvem.

2 - Agora vá em Modelo >> Editar HTML >> E procure pelo trecho
]]></b:skin>

3 - Acima do trecho encontrado, cole o código abaixo :
Nuvem de marcadores coloridos por Deixei Florir 
---------------------------------------------------*/

.cloud-label-widget-content {
text-align: left;
}
.label-size {
background: #87CEFA;
display: block;
float: left;
margin: 10px 6px 3px 0;
color: #fff;
font-family: 'Arial'; /* estilo da letra*/
font-size: 11px; /* tamanho da letra*/
text-transform: uppercase; /* deixa as letras em maiúsculo */
}
.label-size:nth-child(1) {
background: #FF3E96; /* cor do marcador, mude as debaixo se quiser*/
}
.label-size:nth-child(2) {
background: #87CEFF;
}
.label-size:nth-child(3) {
background: #CD6090;
}
.label-size:nth-child(4) {
background:#FF69B4;
}
.label-size:nth-child(5) {
background: #00CED1;
}
.label-size:nth-child(6) {
background:#FF6EB4;
}
.label-size:nth-child(7) {
background: #CD00CD;
}
.label-size:nth-child(8) {
background: #FF3E96;
}
.label-size:nth-child(9) {
background: #87CEFF;
}
.label-size:nth-child(10) {
background: #CD6090;
}
.label-size:nth-child(11) {
background:#FF69B4;
}
.label-size:nth-child(12) {
background: #00CED1;
}
.label-size:nth-child(13) {
background:#FF6EB4;
}
.label-size:nth-child(14) {
background: #CD00CD;
}

.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 10px;
font-weight: normal;
}
.label-size:hover {
background: #222;
}
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;
}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #ff6bb5;
}
/*--- fim do código-----*/


Entendendo o código 
"background"  corresponde ao fundo dos marcadores, observe que existe 14, mas você pode colocar mais, apenas copie
 .label-size:nth-child(14) { background: #código da cor;} 
 e troque o número (14 >> 15 >>16...) eu tenho poucos marcadores por isso 14 para mim já suficiente. As cores podem ser encontradas nessa tabela aqui, copie o código das cores com   se não, não vai funcionar. 

Faça as alterações conforme indicadas dentro do código e pronto. Lembrando que, só vai dar certo se você colocar os seus marcadores no modo " Cloud". Visualize, se estiver tudo certo salve. 

Simples né ?! Qualquer dúvida deixe nos comentários. 

Compartilhe esse post:

  1. funcionou, porém ficou aparecendo parte do html bem no topo do blog

    ResponderExcluir
  2. Oi Mari! Testei no meu blog e funcionou super certinho! :)

    Parabéns pelo blog e pela dica.

    Beijos de Luz ♥
    https://emyteranishi.blogspot.com.br/

    ResponderExcluir