Marcadores em forma de etiquetas usando CSS

Vagabundia ensinou em seu blog como fazer com que os marcadores fiquem com o fundo em forma etiquetas. Veja aqui o post original

Esta dica serve para o novo Blogger, implementado em julho de 2010

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. 

É bem simples, basta ir até o HTML de seu blog e antes de:

]]></b:skin>


 Colar o código abaixo.

 Modifique as cores como mostra o exemplo.

.post-labels {
  margin: 0;
  padding: 0;
}
.post-labels a {
  float: left;
  position: relative;
  background-color: #0089E0;/*cor do fundo*/
  /* la altura */
  height: 24px;
  line-height: 24px;
  padding:0 10px 0 12px;
  margin-left:20px;
  color: #FFF;/*cor texto*/
  font-size:11px;
  font-family: Arial;
  text-decoration: none;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px; 
  border-bottom-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px; 
  border-top-right-radius: 4px;
}
.post-labels a:before {
  border-color: transparent #0089E0 transparent transparent;/*cor ponta seta*/
  border-style: solid;
  border-width: 12px 12px 12px 0;  
  content: "";
  float: left;
  left:-12px; 
  height: 0;
  position: absolute;
  top: 0;
  width: 0;
}
.post-labels a:after {
  background-color: #FFF; /* cor bolinha */
  content: "";
  float: left;
  left: 0;
  position: absolute;
  top: 10px; 
 height: 4px;
  width: 4px; 
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
.post-labels a:hover{
  background-color: #555;/*cor seta passar mouse*/
}
.post-labels a:hover:before {
  border-color: transparent #555 transparent transparent;/*cor ponta seta*/
}

Clique então em "Expandir modelos de widget"

Procure e apague o seguinte código:

<data:postLabelsLabel/>