Personalizando os Marcadores ou Categorias do Blog

Dicas de como organizar seus marcadores/categorias

Os marcadores ou categorias são extremamente importantes para o blog pois eles ajudam a organização dos assuntos , pois quando um leitor clica em cima do marcador/categoria ele é direcionado para a pagina contendo todos os assuntos identificados com aquele marcador .
Ficando assim :

https://www.baudadri.com/search/label/feminino

E aparecerá assim: 

Então organize seus marcadores por assunto tente não colocar em excesso para não confundir o leitor , na configuração do seu gadget  marque para aparecer só os selecionados por você em cloud  e ordem alfabética o que facilita muito.


Então agora vamos personalizar os marcadores/categorias deixando eles combinando com o seu blog , eu separei três estilos de personalização diferentes e simples para vocês executarem , estarei disponibilizando uma tabela de cores para que vocês querendo possam fazer suas próprias combinações.
Vamos lá então.

Abra o blog em tema editar HTML e procure por ]]></b:skin> acima dele cole o código escolhido visualize estando correto salve. Pronto marcadores/categorias personalizado.

Primeiro  ( Modelo  gradiente  com borda quadradinho em hover  ) código

.Label a{
 background:linear-gradient(ivory,azure,floralwhite);
 padding:4px 8px;
 margin:4px;
 font-family:Pacifico;
 font-size:14pt;
 font-style:bold;
 color:#778899 !important;
 display:block !important;
 text-decoration:none;
border:groove;
border-color:mistyrose;
border-width:6px 6px 6px 8px;
float:left;
}
.Label a:hover{
 background:#fffff3 ;
 color:#dd2c72!important;
}

Abaixo dos códigos vou deixar um print para vocês terem uma ideia de como vai ficar:

Modelo 1

Segundo ( modelo arredondado gradiente em hover ) código

.Label a{
     background:linear-gradient(Pink,lightcyan, Peachpuff);
     padding:4px 8px;
     margin:4px;
     font-family:Pacifico;
     font-size:14pt;
     font-style:bold;
     color:#403c52 !important;
     display:block !important;
     text-decoration:none;
     border-radius:10px;
     border-width:12px 12px 12px 0;
     float:left;
     }
    .Label a:hover{
     background:#ccccff ;
     color:#b0c4de!important;
     }

Modelo 2

Terceiro ( modelo em caixinhas ) código

.Label a{
 background-color:#b37987 ; /*cor do fundo*/
 padding:4px 8px; /* distancia entre as caixas*/
 margin:4px;
font-family:pacifico;/*fonte*/
 font-size:14pt;
font-style:italic;
 color:#fffff3!important; /*cor do texto*/
 display:block !important;
 text-decoration:none;
 border:ridge;6px !important; /*estilo da borda*/
 float:left; }
 .Label a:hover{
 background:#faf0d4;/*cor do fundo ao passar o mousse*/
 color:#b37978!important;}/*cor do texto ao passar o mousse*/

Modelo 3

Quarto  ( modelo etiqueta ) código :

.Label a{
 background-color:#ff00ff; /*cor do fundo*/
 padding:4px 8px; /*distancia entre as caixinhas*/
 margin:4px;
font-family:Altura;/*fonte*/
 font-size:14pt;
font-style:italic;
 color:#ffffff!important; /*cor do texto*/
 display:block !important;
 text-decoration:none;
 border:dotted;16px !important; /*estilo das borda*/
 float:left; }
 .Label a:hover{
 background:#fffafc;/*cor do fundo ao passar o mousse*/
 color:#b37978!important;}/* cor do texto ao passar o mousse*/

Modelo 4

• Atualizado em 22/09/2019

Esse três modelos são simples de colocar testei em vários temas do blogger não tive problema em nenhum , todos ficam em hover ao passar o mousse , você pode trocar as cores se desejar , estou deixando um link com algumas combinações de cores.

Aqui tem uma
Paleta de Cores Do Baú da Dri  novas cores.

Por hoje é isso . Gostou do post ? Deixe seu comentário , pedido , querendo peça o tutorial que gostaria de ver , compartilhe espalhe o link do blog por ai isso ajuda o blog a crescer .😉