February 09, 2009 ~ Tutoriales Blogger

Lo que queremos obtener es en esencia mostrar un contenedor con un mensaje que se mostrará sobre cada post con una etiqueta específica. Yo, por ejemplo, solía utilizar este truco para mostrar un mensaje con ciertas directrices con respecto a las plantillas solamente en posts individuales con la categoría “Plantillas-Templates”.

Explicación

Lo que he hecho es simplemente agregar un “includable” (digamos que son contenedores o secciones “Blogger”) que contenga el mensaje con ciertas condiciones,… y un “include” que, como he mencionado antes, activa o llama al contenedor. En fin, a continuación los pasos a seguirse:

1. Vamos a Edición de HTML (desde Panel – Diseño), y expandimos artilugios.

2. Buscamos la siguiente línea:

<b:includable id='main' var='top'>

Sobre ella pegaremos el siguiente código (con las variaciones respectivas):

<b:includable id='mensaje-etiqueta' var='post'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:post.labels'>

      <b:loop values='data:post.labels' var='label'>
        <b:if cond='data:label.name == &quot;etiqueta&quot;'>
          <div class="mensaje-etiqueta">
            El mensaje a mostrarse.

          </div>
        </b:if>
      </b:loop>
    </b:if>
  </b:if>
</b:includable>
  • Reemplazamos “etiqueta” por la etiqueta que deseamos. Debe estar escrita correctamente; las mayúsculas y minúsculas son importantes (etiqueta no es igual a ETIQUETA o Etiqueta).
  • Con la clase (mensaje-etiqueta), podemos darle estilo al contenedor, desde el CSS de nuestra plantilla [el código que se encuentra entre <b:skin> y </b:skin>]:
    .mensaje-etiqueta {background: black; color: white;}
  • Obviamente, donde está el texto en azul irá nuestro mensaje.

3. Ahora buscamos esta línea,

<data:post.body/>

y sobre ella pegamos la siguiente:

<b:include data='post' name='mensaje-etiqueta'/>

4. Con esto habremos terminado. Hacemos click en Vista previa solo para saber si Blogger no nos avisa de algún error. No veremos nada en la página principal de nuestro blog, ya que el mensaje sólo aparece en posts individuales. Si todo parece trabajar correctamente, guardamos cambios…

¡y listo!

Demo

Acá un ejemplo en funcionamiento.

More in this category:

blog comments powered by Disqus