
En El Escaparate, lo llaman el mensaje de las etiquetas. Yo le dejo el nombre con que Blogger lo bautizó, porque también aparece ahí el mensaje de búsquedas, así que “status-message” (o mensaje de estado) está bien.
Una de las cosas que menos me gusta de Blogger es esa barrita que dice “Mostrando entradas con la etiqueta X. Mostrar todas las entradas.” En realidad es el diseño de Blogger el que no me gusta… O al menos eso pensaba hasta ayer, cuando me puse a pensar que quizás no se verían tan mal si estuviera en la sidebar del blog. Luego me dije (hablo solo a veces
): “¿cómo hago eso?”
Explicación
Veamos: hay un principio sencillo.
Esta parte del blog está definida en el widget/gadget “Blog1″ -que es en realidad el área de los posts- de nuestra plantilla. Eso quiere decir que, si expandimos artilugios desde la Edición de HTML de nuestro blog, veremos dos códigos importantes.
- El primero es un código include que “llama”/activa al código includable -que es donde básicamente se define esta área.
- El código includable.
<b:include data='top' name='status-message'/>
y…
<b:includable id='status-message'>
<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>
</b:includable>
- En esencia, entonces, el primer paso sería tan sólo borrar el código include. Así habremos quitado del área de los posts al mágico mensajito de Blogger. Pero, de nuevo, ¿cómo hacemos para que aparezca en la sidebar del blog? Así como hay un gran widget/gadget llamado “Blog1″, también puede haber uno llamado “Blog2″… y en nuestra sidebar.
- Buscamos el siguiente código (o alguno bastante parecido ya que suele cambiar dependiendo de la plantilla):
<b:section class='sidebar' id='sidebar' preferred='yes'>
… y justo abajo pegamos lo siguiente:
<b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'> <b:includable id='status-message'> <b:if cond='data:navMessage'> <div class='status-msg-wrap'> <div class='status-msg-body'> <data:navMessage/> </div> </div> <div style='clear: both;'/> </b:if> </b:includable> <b:includable id='main' var='top'> <b:include data='top' name='status-message'/> </b:includable> </b:widget> - Definimos el estilo del mensajito, justo antes de ]]></b:skin>, de la siguiente forma:
.status-msg-wrap{ /*el contenedor donde se encuentra el mensaje*/ } .status-msg-body{ /*básicamente el mensaje*/ text-align:center; width:auto; display:block; font-size:12px; margin-bottom:30px; background: #12120D; color: #fff; }
Et voilà!