Marcadores dos posts em formato de tags coloridas

em 8 de novembro de 2016


Tempos atrás eu mostrei aqui no blog como colocar os marcadores na sidebar em formato de nuvem colorida.
Lembra?
Não? Então recorde aqui: Nuvem de tags colorida para blog

Daí, seguindo o mesmo princípio e basicamente com apenas uma modificação, quero te mostrar como colocar o mesmo estilo nos marcadores abaixo dos posts.
Assim:


Demonstração do tutorial


É bem simples de fazer funcionar em seu blog, um pouquinho de atenção e tudo dará certo.
Vamos lá?
Para começar você precisa, claro, ter os marcadores/categorias inseridos em seus posts.
Não sabe como fazer? Então leia:

Como inserir marcadores em suas postagens

Marcadores inseridos nos posts?
Abra a página com os códigos que vamos utilizar na realização do tutorial:


Copiar os códigos


Então vá ao painel administrativo de seu blog e clique na aba Modelo.
A seguir clique em Editar HTML e dentro da caixa de código que abrir tecle Ctrl+F.
Na barra de pesquisa que aparecer digite isso:
<span class='post-labels'>

E tecle Enter para localizar.
Você vai achar esse código, ou algo parecido com isso:

<span class='post-labels'>
        <b:if cond='data:top.showPostLabels and data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>
          </b:loop>
        </b:if>
      </span>


Apague tudo, de <span class até </span> e no lugar cole o CÓDIGO MODIFICADO.
Salve.

Caso queira trocar a palavra Categorias por outra de sua escolha basta apagar Categorias desse código e substituir pela palavra que deseja.



Agora, na barra de pesquisa, digite </head> e tecle Enter para localizar.
Acima disso cole o CÓDIGO CSS e salve.

Esse é o código que define as cores das tags, ok?
As cores são definidas, como você já sabe, pelo código hexadecimal precedido do sinal #.
Para cada cor é preciso alterar o código em 2 lugares onde ele aparece.
Esse é o código de cada cor:

.post-labels a:nth-child(1){background:#b792ec}
.post-labels a:nth-child(1):before{border-color:transparent #b792ec transparent transparent}

Observe que para modificar a cor precisa alterar o código dela nos dois lugares onde ele aparece.
Altere se desejar, salve e tá feito!

Deixei marcado no CÓDIGO CSS as áreas que considero seguras editar, mesmo sem grande conhecimento em CSS.
Outras modificações são por sua conta e risco; faça testes antes, tá?

Espero que dê certo e seu blog fique lindo!
Se tiver dificuldades relativas ao tutorial diga nos comentários e se for possível eu respondo com a ajuda :)
Enjoy!

*Tutorial traduzido de Blogger Atoz


Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

2 comentários , comente também!

  1. É lindo colorido assim, só não vou usar ele, porque eu uso template baixado da net e tem uns que não aceita, mas achei lindo, quem sabe ainda posso usar ele.

    www.andreiapaula.com.br

    ResponderExcluir
  2. Nossa gostei muito vou colocar no meu blog Obrigado! Sucesso sempre que posso acompanho seus posts.Parabéns
    Caso queira ver meu blog:http://blogkiquii.blogspot.com.br/?m=1 ou acesse: moda entre modas
    Desejo sucesso parã você.

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…