Personalizando os Marcadores ou Categorias do Blog

E 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  Chocolate ) código

.Label a{
 background-color:#874e4c ; /*cor do fundo*/
 padding:4px 8px; /*distancia entre as caixinhas*/
 margin:4px;
font-family:pacifico;
 font-size:14pt;
 color:#fff!important; /* cor do texto*/
 display:block !important;
 text-decoration:none;
 border-radius:14px !important; /*estilo da borda*/
 float:left; }
 .Label a:hover{
 background:#edb091 ;/*cor do fundo ao passar o mousse*/
 color:#fff!important;}/*cor do texto ao passar o mousse*/

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

Modelo 1

Segundo ( 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 2

Terceiro  ( 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 3

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
Tabela de cores do Baú da Dri / você irá encontrar 14 paletas com combinações para personalizar seu blog

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 .😉