04 septiembre, 2016

Personalizar mensaje "mostrando los mensajes con la etiqueta..."

//
Cuando tenemos un blog dónde las etiquetas tienen importancia, es muy recomendable añadir un estilo al mensaje que nos aparece cuando estamos viendo todos los posts de una determinada etiqueta, para que quede integrado en el estilo del blog y sea más efectivo su uso.

¡Hacerlo es muy sencillo! Son dos pasos para personalizar completamente el mensaje:

PARTE I - Cambiar el mensaje que nos aparece por defecto
1. Debemos desde ir a Plantilla > HTML, clicar dentro del recuadro dónde aparecen los códigos y, con mucho cuidado de no modificar nada, teclear a la vez Ctrl y F.

2. En el pequeño buscador que aparece en la esquina superior derecha del recuadro debemos buscar <div class='status-msg-body'> pulsando la tecla Intro para encontrarlo dentro de la estructura del blog. Aparecerá lo siguiente:

<div class='status-msg-body'>
<data:navMessage/>
</div>

  • Lo que está en negrita es la línia que hemos buscado
  • Lo que está en naranja es el código del mensaje de las etiquetas que queremos modificar.

3. Para sacarle partido a este recurso que nos ofrece blogger podemos sustituir el código naranja por <data:blog.searchLabel/>, que es el código para que aparezca únicamente el nombre de la etiqueta. De este modo puedes jugar creando frases más personalizadas y atractivas que combinen con el estilo de tu blog.
Por ejemplo, si escribimos Estás viendo <data:blog.searchLabel/> se vería así:

Estás viendo Poemas

PARTE II - Añadir estilo al mensaje:
Copiar y pegar el código del estilo en Plantilla > Personalizar > Avanzado > Añadir CSS:


/* Mensaje Etiquetas
----------------------------------------------- */
.status-msg-wrap{ /*Estilo de la caja*/
width: 70%; /*Ancho de la caja*/
background:#fff; /*Color de fondo de la caja*/
}

.status-msg-body { /*Estilo del texto*/
font-style: italic; /*Para que aparezca en cursiva, si no lo queremos borramos la línia*/
color: #444; /*Color del texto*/
}

.status-msg-border{ /*Para cambiar el borde de la cajita, si no queremos borde lo sustituimos por border:none; */
border: 4px double #eee;
}

.status-msg-bg { /*Cambiar el color de fondo de la caja, debe ser el mismo que el de antes para que no quede semitransparente*/
background-color: #ffffff;
}
/* Fin Mensaje Etiquetas
----------------------------------------------- */


Como siempre puedes sustituir, quitar o añadir lo que quieras del estilo para que quede a tu gusto.

1 comentario