Personalizar la barra de estatus en Blogger

La barra de estatus de Blogger es la que se muestra en la parte superior de las entradas cuando se selecciona una determinada etiqueta.

Al seleccionar una etiqueta del blog, Blogger nos muestra todas las entradas que tienen incluida la etiqueta seleccionada. Una vez que hemos seleccionado una etiqueta aparece en la parte superior un mensaje como éste.....[Mostrando entradas con la etiqueta "nombre de la etiqueta". Mostrar todas las entradas] (es un enlace que nos lleva a Inicio).

Este mensaje se puede modificar y personalizar a nuestro gusto. Para eso tenemos que modificar la plantilla. 

Cómo podemos mejorar el aspecto de la barra de estatus

1.- Cambiar el contenido del mensaje de la barra de estatus en Blogger

     A. Sin incluir el enlace a todas las entradas

Como he configurado una barra horizontal de menú en la que ya tengo la pestaña Inicio que dirige al visitante a la página inicial con todas las entradas, no voy a incluir un nuevo enlace hacia el mismo destino. Ver entrada "Cómo añadir un menú horizontal al blog (con Blooger)".

En el menú de Blogger accedo a Plantilla-Editar HTML.

Una vez dentro de la ventana en la que se muestra el código de la plantilla, abro el buscador con CTRL+F y escribo 'data:navaMessage'.

Voy a modificar el código condicional de las siguientes líneas,

<b:if cond='data:navMessage'>
   <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      <data:navMessage/>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if>

Elimino la línea en rosa "<data:navMessage/>" y la sustituyo por ;

Etiqueta: <data:blog.searchLabel/>

El código quedará ahora así,

<b:if cond='data:navMessage'>
   <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      Etiqueta: <data:blog.searchLabel/>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if>

He puesto la palabra "Etiqueta". A partir de ahora el mensaje mostrará "Etiqueta" y a continuación el nombre de la etiqueta seleccionada. Por ejemplo, si selecciono la etiqueta"Marcos" ahora el mensaje será el siguiente,

      B. Indicando el número de entradas y sin incluir el enlace a todas.

Otra posibilidad es definir el texto del mensaje que acompañará al nombre de la etiqueta, indicando el número de entradas que existen y se muestran.

El código por el momento lo tengo configurado así (punto 1).

<b:if cond='data:navMessage'>
   <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      Etiqueta: <data:blog.searchLabel/>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if>

Ahora modifico la línea "Etiqueta:<data:blog.searchLabel/>" por la siguiente,

<data:blog.searchLabel/>_Mostrando <data:numPosts/> entradas

Quedando el código como se muestra en el siguiente cuadro,

<b:if cond='data:navMessage'>
   <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      <data:blog.searchLabel/>_Mostrando <data:numPosts/> entradas
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if>

El resultado en el blog es,

      C. Indicando el número de entradas e incluyendo el enlace a todas.

Por último voy a probar a cambiar el texto del mensaje incluyendo el enlace a todas las entradas.

Parto del código desarrollado en el punto 2 en el que está modificado el texto del mensaje y que incluye el número de entradas que se muestran de la etiqueta seleccionada.

De nuevo modifico la línea en grana,

<data:blog.searchLabel/>_Mostrando <data:numPosts/> entradas

Y la cambio por la siguiente,

<data:blog.searchLabel/>_Mostrando<data:numPosts>entradas

<a expr:href='data:blog.homepageUrl'>Mostrar todas las entradas.</a>

El código final es,

 

<b:if cond='data:navMessage'>
   <div class='status-msg-wrap'>
    <div class='status-msg-body'>
     <data:blog.searchLabel/>Mostrando <data:numPosts/> entradas
     <a expr:href='data:blog.homepageUrl'> Mostrar todas las entradas.<a>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if>

Ahora el contenido del mensaje estará formado por el "nombre de la etiqueta"_Mostrando (nº) entradas que integran la etiqueta_Enlace a "todas las entradas".

      D. Eliminar el mensaje de la etiqueta seleccionada

Si no queremos que se muestre ningún mensaje cuando se selecciona una etiqueta tenemos ir al menú de Blogger, seleccionar Plantilla-Editar HTML. Con CTRL+F escribimos "status-message" en el buscador y localizamos la siguiente línea,

<b:include data='top' name='status-message'/>

 En la plantilla de mi blog elimino la primera línea (se repite en otra ocasión).
 Una vez eliminada, ya no se mostrará ningún mensaje cuando se seleccione una etiqueta.

Ya he modificado el contenido del mensaje pero no me gusta cómo queda porque no destaca el nombre de la etiqueta seleccionada, así que ahora voy a seguir personalizando el estilo del mensaje cambiando la fuente de letra, su tamaño, color y fondo del elemento que contiene el mensaje.

2.- Personalizar la barra de estatus en Blogger

Ya tengo personalizado el texto que se mostrará en el mensaje de la barra de estatus una vez se haya seleccionado una etiqueta. 

Ahora voy a cambiar el estilo de esta barra de estatus y para eso necesariamente tengo que modificar el lenguaje CSS de la plantilla. Como ya he comentado en anteriores entradas, el lenguaje CSS según Wikipedia_CSS es,

Hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML).

Los elementos que tenemos que añadir al código CSS de la plantilla son,

• status-msg-wrap. Es el contenedor principal de la barra que define su situación respecto a las entradas.

• status-msg-body. Se ocupa de dar estilo al cuerpo del mensaje.

• status-msg-border. Define el borde.

• status-msg-bg. Define el color de fondo.

Para añadir estos códigos CSS de nuevo accedo a Plantilla-Editar HTML y busco con CTRL + F  la etiqueta <b:skin>. 

Como ya comenté en la entrada "Personalizar pestaña seleccionada del menú páginas de un blog", todas las líneas que hay entre <b:skin>... y ... </b:skin>  corresponden al código CSS de la plantilla en Blogger.

Si las etiquetas de apertura <b:skin> y de cierre </b:skin> se presentan en la misma línea separada por puntos significa que están ocultas las líneas entre ambas etiquetas. Las hacemos visibles y expandimos el código haciendo clic sobre el triángulo que está situado al lado del número de fila.

Una vez que está expandido el código entre estas etiquetas busco la última fila   ]]></b:skin>

Justo antes de esta etiqueta inserto las siguientes líneas de código;

/*Personalizar el mensaje "Mostrando entradas de la etiqueta.."
------------------------------------------------------------------*/

.status-msg-wrap {                        /*contenedor de la caja del mensaje*/
width:80%;                                   /*ancho de la caja*/
margin:5px 10px 20px 90px;   /*margen de la caja*/
padding:0px;                            /*relleno de la caja*/
}

.status-msg-border {                               /*borde de la barra de estatus*/
border-top: 3px solid #000000;          /*borde superior*/
border-bottom: 2px solid #9990a1;  /*borde inferior*/
border-left: 1px solid #9990a1;        /*borde izquierdo*/
border-right: 1px solid #9990a1;   /*borde derecho*/
}

.status-msg-bg {                           /*Para cambiar el color de fondo de la caja*/
background-color:white;
}

.status-msg-body {                                              /*cuerpo de la barra de estatus*/
text-align:center;                                               /*texto centrado*/
font-family: 'Century Gothic', sans-serif;     /*fuente de letra*/
font-size: 21px;                                              /*tamaño de letra*/
font-weight: 500;                                         /*ancho de letra*/
color: #4D2701;                                         /*color de letra*/
padding:3px;                                             /*relleno*/
}

El resultado es el siguiente,

Si se quiere mostrar el texto en mayúsculas añadimos antes de la llave final  }  la siguiente línea de código,

text-transform: uppercase;

Este es un ejemplo pero puede personalizarse de múltiples maneras, solo hay que cambiar los valores de las propiedades o bien añadir nuevas.