Personalizar etiquetas en Blogger

En este tutorial les enseñaré una sencilla forma de personalizar las etiquetas en Blogger con el fin de mejorar poco a poco cada parte del blog. Para ello mostraré cuales son las etiquetas (la clase) y cómo podemos personalizarlas.

El tutorial:

Es sencillo ubicar la línea de las etiquetas, estas están marcadas con la clase ''post-labels''. Corresponden a la siguiente parte de las entradas:

Paso 1: Eliminando la coma entre las tags:

Por defecto las tags se ven de la siguiente forma:

Etiquetas: Repostería, Tips de Belleza, Hágalo usted misma


Lo que haremos será eliminar cada separador entre las tags de las entradas, para ello vamos a ''Diseño | Edición HTML''. Marcaremos la casilla ''Expandir plantillas de artilugios''.

Buscaremos un código muy 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;'>,</b:if>
          </b:loop>
        </b:if>
      </span>

Eliminaremos la coma que se encuentra marcada en rojo o bien la reemplazaremos.

Paso 2: Personalizando las tags:

Ahora deberás crear los atributos para la clase post-labels y para los enlaces de esta:

.post-labels {
/*Atributos del contenedor*/ } 
.post-labels a:link {
/*Atributos del enlace*/}
.post-labels a:visited {
/*Atributos del enlace visitado*/
}
.post-labels a:hover {
/*Atributos del enlace al pasar el mouse sobre este*/
}

Tendrás que reemplazar los valores en verde por los estilos que desees aplicar. Para hacerlo mas fácil les añadí atributos en el siguiente ejemplo, recuerda que el código deberás pegarlo antes de ]]></b:skin>:

.post-labels {
background:#f5f5f5;
padding:7px;
width:500px;
font-size:11px;
 }
.post-labels a:link {
color:#fff;
background:#006699;
padding:5px;
border-radius:4px;
box-shadow:2px 2px 2px 1px #969696;
margin-right:3px;
}
.post-labels a:visited {
color:#fff;
}
.post-labels a:hover {
color:#fff;
background:#CC0000;
}

Reemplaza los valores que consideres necesarios, una vez realizado guarda los cambios y listo.