viernes, 28 de diciembre de 2012

Agregar Elementos solo en Posts con determinada Etiqueta

Hace tiempo, te decía cómo agregar una cajita de suscripción debajo de los posts, para que los usuarios de tu blog puedan suscribirse desde las entradas del blog.




cajita de suscripcion



En ese mismo post, me comentaba un usuario que quería agregar dicha caja solo en determinadas entradas del blog. Esto lo podemos conseguir valiéndonos de las etiquetas de los posts. En otras palabras, podemos agregar la cajita, o cualquier cosa que queramos en los posts tomando en cuenta las etiquetas.



Lo que haremos



Voy a explicar como agregar la cajita que te mencionaba, solo en las entradas de cierta etiqueta. Para ello voy a usar un ejemplo, de ese modo podre ilustrarlo más fácilmente.




Cómo hacerlo paso a paso






Ejemplo. Vamos a pensar que quieres que aparezca dicha cajita solo en las entradas con la etiqueta "Delicioso".  En este caso, como en el tutorial que menciono, colocaremos la cajita debajo de los posts, como último elemento. Tomando en cuenta éste ejemplo, veamos como lograrlo...




  1. Lo primero que haremos es agregar el CSS de la cajita. Si es otro elemento el que vas a agregar, entonces deberás agregar el CSS del elemento en "Añadir CSS" del diseñador de plantillas. 

  2. Luego vas a la edición de HTML de la plantilla, localizas el siguiente div que está resaltado de rojo.



     <div class='post-footer-line post-footer-line-3'>

    Aquí dentro muy probablemente habrá otro código (ver el Paso 3 de la entrada mencionada)

    </div>



  3. Inmediatamente después del cierre del div "</div>" agregaremos otro div (<div class='post-footer-line post-footer-line-4'>)conteniendo los códigos necesarios para que aparezca la cajita solo en la etiqueta "Delicioso".  Necesitas editar el código antes de ponerlo el el código de tu plantilla:


    <div class='post-footer-line post-footer-line-4'>

    <b:loop values='data:post.labels' var='label'>

    <b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:label.name == &quot;Delicioso&quot;'>

    Aquí pones el contenido de la cajita o elemento que agregarás

    </b:if>

    </b:if>

    </b:loop>

    </div>

                        

    Notas importantes del código anterior:


    • A diferencia del post que estamos refiriendo con la cajita de suscripción, estamos agregando el contenido a un div (<div class='post-footer-line post-footer-line-4'>)para que de ese modo sea más fácil  "mover todo el contenido". Si lo quieres mover, puedes usar CSS, y en éste caso usaremos el margen para lograrlo. Sería algo como esto:


      .post-footer-line-4{

      margin: 10px 0 5px -20px; /*los valores se leen: arriba, derecha, abajo, izquierda*/

      }


    • En esta linea:  

      <b:if cond='data:label.name == &quot;Delicioso&quot;'>

      Tenemos que poner el nombre de la etiqueta donde va a aparecer la cajita o el elemento que vas a agregar, en lugar de la etiqueta Delicioso, que estamos usando como ejemplo.




    • Con esta linea:


      <b:if cond='data:blog.pageType == &quot;item&quot;'>

      Hacemos que la cajita aparezca solamente al estar dentro del post. Ambas lineas, son condicionales de Blogger y llevan su cierre "</b:if>". Si quieres que el elemento se vea desde la página principal, entonces deberás eliminar esa linea y también la de cierre </b:if>que está casi al final del código (hay dos).





  4. Finalmente, verificas en vista previa y si todo luce bien, guarda los cambios.




Hecho todo lo anterior, la cajita aparecerá al final de los posts que tengan la etiqueta "Delicioso" (nuestro ejemplo), solo al estar dentro de los posts.






Demostración


Puedes ver esto en acción desde éste blog, ingresando a la entrada con la etiqueta "Delicioso", ahí verás la cajita, mientras que en los otros posts no aparecerá. 





Otros posts que pueden ser útiles:








No hay comentarios:

Publicar un comentario