Tips para Blogger! Personalizar Etiquetas + Tutorial

9:00:00 Princess Aleka 6 Comentarios

Captura0

¡Muy lindo jueves para todos! Hoy toca el Tip para Blogger de este mes, espero que les sea útil. En esta ocasión, te mostraré una manera fácil de modificar la apariencia de las etiquetas con las que definimos las entradas. Originalmente, tienen un aspecto parecido a este:

Captura1

Para cambiarlas, sigue estos sencillos pasos. Como siempre, guarda una copia de tu plantilla por si algo sale mal. Veamos:

Paso 1: Entra en tu cuenta de Blogger. Dirígete a Plantilla y abre el Editor HTML.

Captura2

Paso 2: Marca la casilla “Expandir plantillas de artilugios”.
Captura3

Paso 3: Presiona Ctrl + F para abrir el cuadro de búsqueda. En Firefox se parece a este:

Captura4

Paso 4: Busca esta línea en tu código:

<span class='post-labels'>

Paso 5: Te aparecerá un segmento de código como el que sigue. Borra la coma que está señalada:

Captura5

Paso 6: Por cuestiones de estética, te recomiendo dejar un espacio vacío en el lugar de la coma. Esto evitará que las etiquetas se “peguen” o se vean muy juntas.

Captura6

Paso 7: Ahora, le indicaremos a la plantilla cómo queremos que se vean las etiquetas. Busca en tu código la siguiente línea:

]]></b:skin>

Paso 8: Justo ANTES de esa línea de cierre, pega este código. Es en líneas generales una plantilla para modificar el aspecto de las etiquetas:

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

Para modificarlas, escribe los atributos entre los corchetes. Te dejo como ejemplo el código que utilicé para la imagen de ejemplo (es distinto al que usa actualmente mi blog). Modifica lo que consideren necesario:

.post-labels {
background:#f5f5f5;
padding:7px;
width:500px;
font-size:11px;
 }
.post-labels a:link {
color:#fff;
background:#191155;
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:#BB893C;
}

Paso 9: Guarda cuando termines, ¡y listo!

Captura7

Ahora tus etiquetas no se verán como simples enlaces, sino como botones identificadores. Espero que este tutorial te sea de utilidad, y si no te funciona o necesitas ayuda extra, no dudes en dejarme tu comentario. Ayudaré en lo que pueda. Un muy fuerte abrazo,

Denise
Twitter

6 comentarios:

  1. Me gusta mucho el nuevo diseño de tu blog. 
    Este post es super informativo, gracias!

    ResponderEliminar
  2. voy a probarlo, ahora te digo 

    ResponderEliminar
  3. lo he consguido, gracias tieshafashion.blogspot.com.es

    ResponderEliminar
  4. ¡Gracias a ti por tu visita, Carola! Besos. <3

    ResponderEliminar
  5. ¡Que bueno! Se ve muy bien en tu blog. El color mostaza le va bien.

    ResponderEliminar

Deja tu huella en este Universo

Populares de la semana