Decorando las etiquetas con CSS

JMiur

Modificando un poco la idea de cssglobe.com podemos intentar darle un toque diferente a la lista de etiquetas que se muestra debajo de las entradas o, en realidad, a cualquier otro tipo de lista y todo, sin necesidad de utilizar imágenes, empleando algunas de las nuevas alternativas del CSS con lo que en algunos navegadores, el resultado será distinto (IE7) pero más que aceptable.

En el caso de Blogger, esas etiquetas se muestran con un código similar a este:

<span class='post-labels'>

  <b:if cond='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='data:label.isLast != &quot;true&quot;'gt;,</b:if>

    </b:loop>
  </b:if>
</span>

Allí, esta línea es la que agrega una coma o un caracter separador entre los textos de esa lista y, la eliminamos porque es innecesaria:

<b:if cond='data:label.isLast != "true"'gt;,</b:if>

Si deseamos, lo mismo podemos hacer con esta otra que por defecto,escribe el texto "Etiquetas:"

<data:postLabelsLabel/>

Todo lo demás puede quedar igual ya que normalmente, esas etiquetas no tienen definiciones de estilo especiales así que, se las agregamos, colocando esto antes de </b:skin>:

.post-labels {
  margin: 0;
  padding: 0;
}
.post-labels a {
  float: left;
  position: relative;
  background-color: #0089E0; /* el color de fondo que se nos ocurra */
  /* la altura */
  height: 24px;
  line-height: 24px;
  /* el ancho lo resolvemos con paddings horizontales */
  padding:0 10px 0 12px;
  /* la separación entre etiquetas */
  margin-left:20px;
  /* definiciones del texto */
  color: #FFF;
  font-size:11px;
  font-family: Arial;
  text-decoration: none;
  /* una curva suave a laderecha */
  -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;
}
/* esto creará el triángulo de la izquierda */
.post-labels a:before {
  border-color: transparent #0089E0 transparent transparent;
  border-style: solid;
  /* el borde es igual a la mitad de la altura definida anteriormente */
  /* de ese modo será un triángulo equilátero */
  border-width: 12px 12px 12px 0;  
  content: "";
  float: left;
  left:-12px; /* lo movemos tanto como el valor dado al borde */
  height: 0;
  position: absolute;
  top: 0;
  width: 0;
}
/* esto, creará el circulito que precede a los textos */
.post-labels a:after {
  background-color: #FFF; /* el color */
  content: "";
  float: left;
  left: 0;
  position: absolute;
  top: 10px; /* lo ubicamos centrado en al mitad de la altura */
  /* el ancho y la altura son iguales para que sea un círculo */
  height: 4px;
  width: 4px; 
  /* el radio de la curva es la mitad de su tamaño */
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
/* efectos hover */
.post-labels a:hover{
  background-color: #555;
}
.post-labels a:hover:before {
  border-color: transparent #555 transparent transparent;
}

Blogger CSS plantillas