Personalizando marcadores ou categorias do blog

Os marcadores\categorias \tag do blog, são importantes quanto a organização das postagens e um excelente forma de facilitar o leitor a encontrar o conteúdo que procura.

Vamos dar uma atenção  aos marcadores \ categorias \ tags, do nosso blog?

Venho trazendo 4 modelos para personaliza - los, mas além de ficarem mais atrativos e combinarem com o blog, os marcadores \ categorias \ tags, possuem uma função importante  que além de auxiliar a organizar melhor o blog ajuda o leitor a navegar melhor entre os, marcadores\ categorias \ tags que deseja visitar.

Bora, lá? 

Conferir seu melhor uso e personaliza - los.

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.
Porém, você para usar essa função em benefício do SEO do seu blog dever estar atento à escolha de marcadores relevantes para a postagem.

Vou dar um exemplo, você coloca um marcador, dicas, ele é muito abrangente, dicas de quê?
Moda, beleza, marketing, etc...

Tente não adicionar mais que 16 marcadores.

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,ao final da pagina tem uma tabela de cores para que vocês querendo, possam fazer suas próprias combinações na mesma pagina você também encontra as explicações de como usar o gradiente.

Personalizando marcadores ou categorias do blog

Demonstração do Tutorial

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 os modelos em gradiente:

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*/

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*/

• Atualizado em 13/04/2020

Esses 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 cursor, você pode trocar as cores se desejar, estou deixando um link com algumas combinações de cores.

Aqui você encontra algumas combinações de cores, Paleta de Cores Do Baú da Dri   e como usar o gradiente.

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 aí isso ajuda o blog a crescer.😉