Como organizar as categorias, tags do Blog e personalizar

em 31/08/2021

Tempo de leitura:

 

Organizar e personalizar categorias do blog


  • Marcadores ou categorias e tags 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.
  • Você sabe qual a diferença entre eles?
  • Como o nome sugere, as tags (etiquetas) são usadas para classificar os assuntos relacionados que podem aparecer nos temas  classificados por categoria. 

  • Categoria dá, o tema e a tag o assunto no mesmo.

  • Os marcadores ou categorias nativo do Blogger são muito simples não dando nenhum destaque a esse gadget.


  • Aqui apresentarei 4 estilos de personalização, podendo alterar cores e alguns outros itens.

  • Pois, além de ficarem mais atrativos e combinarem com o blog, os marcadores, categorias ou tags possuem uma função importante que além de auxiliar a organizar melhor o blog ajuda o leitor a navegar melhor entre os assuntos do seu interesse.

  • Vamos aos códigos e instruções, leia bem siga tudo com atenção todos já foram testados por mim nos temas do Blogger.


  • Os marcadores ou categorias são extremamente importantes para o blog: 
  • Eles ajudam a organização dos assuntos, pois quando um leitor clica em cima do marcador/categoria ele é direcionado para a página 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 categorias relevantes para a postagem.

  • Darei 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.universoblogueira.com/search/label/feminino
  • E aparecerá assim: 

exemplo de pagina

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

  • 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 página 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 



  • 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
modelo arredondado de categorias

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

  • 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 coresPaleta de Cores   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 por aí isso ajuda o blog a crescer.😉

Nenhum comentário , comente também!

Postar um comentário

Você leu um artigo escrito com grande dedicação. Gostou? !
Deixe seu comentário, crítica e sugestão, eles são importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Obrigado pela visita, volte sempre. Aproveite para inscrever-se e receber as novidades.