07 maio 2019

Personalizando os Marcadores ou Categorias do Blog

🗨

Dicas de como organizar seus marcadores/categorias

tutorial marcadores e categorias do blog personalizados


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: 

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.


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.
Bora lá .





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

  • Atualizado em 13/04/2020

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


5 comentários:

  1. Olá, boa noite! Tenho acompanhado seu site e tem me ajudado muito! Obrigada por compartilhar e nos ajudar!!
    Mas preciso de uma ajuda específica que não achei: nas minhas postagens aparece a categoria que a postagem pertence, porém só aparece uma. Um exemplo: postei sobre um determinado assunto, mas antes de postar, coloquei ela em duas categorias, mas quando público aparece só uma e é primeira em ordem alfabética. Como posso colocar para aparecer todos as categorias que coloquei nas postagens? Por favor? Obrigada desde já!

    ResponderExcluir
    Respostas
    1. Você tem que configurar o gadget dos marcadores , configure marcadores selecionados , ordem alfabética ou por frequência , cloud , depois marque na caixinha de cada etiqueta que você deseja que apareça.

      Excluir
    2. Muito obrigada por responder, Adriana! Mas está marcado. Na página inicial, está aparecendo todos os marcadores da gadget. Nas minhas postagens é que não estão. Se uma postagem "x", coloco dois marcadores ou mais, só aparece um após a publicação. Sabe quando aparece a categoria da postagem para os leitores na postagem? No meu caso fica abaixo do título. Nesse local que só aparece um, mesmo eu colocando mais de um lá na edição da postagem.

      Excluir
    3. Boa tarde Dani dei uma olhada no seu site seu template não é nativo do blog , pode ser nas configurações dentro do HTML , eu não saberei te dizer sem conhecer mas dei umas pesquisadas em alguns modelos semelhantes ao seu , para poder te ajudar se você desejar entra em contato comigo pelo whats assim posso te orientar e tentarmos resolver , eu fico muito incomodada quando algo não funciona à contento , no que precisar estou a disposição.
      Obs: Amo plantas , #ameiminijardim e cia . Bjs

      Excluir
    4. Oiê! Perdão, pela demora em responder. Fico feliz que tenha gostado do blog! Obrigada!! Sou apaixonada por plantas também! rs
      Se não for te incomodar, eu aceito. Você quer me passar seu número ou te passo o meu? Qualquer coisa esse é o meu e-mail: minijardimecia@gmail.com
      Muito obrigada pela atenção e ajuda!!Bjs 😊

      Excluir

Você leu uma postagem escrita com muito amor por mim Adriana autora do Baú da Dri . Gostou?! Deixe seu comentário , criticas e sugestões , ela são muito importantes para fazer o blog cada vez melhor . Curta , compartilhe ,ajude o blog a crescer .
Sua mensagem será respondida o mais breve possível .
Muito obrigada pela visita e volte sempre.

Confira também outras postagens aqui do Baú da Dri