Hace ya un tiempo vimos cómo editar los posts de blogger dependiendo del orden en el que se encontraran. Hoy vamos a realizar una técnica parecida para editar los posts dependiendo de la categoría.

Verlo en funcionamiento

Idea inicial

Llévame al grano

Para hacerlo inicialmente pensé en algo así, buscando <b:includable id='post' var='post'> reemplazando:

<div class='post hentry' ...>

Por:

&lt;div class='post hentry<b:if cond='data:post.labels'> has-tags<b:loop values='data:post.labels' var='label'> tag-<data:label.name/></b:loop><b:else/> no-tags</b:if>'&gt;

Y su correspondiente </div> (encima de un </b:includable>) por &gt;/div&lt;

Así podríamos usar CSS para hacer, por ejemplo, que todos los posts de una etiqueta llamada link tuvieran un símbolo representativo a la izquierda del título:

.tag-link .post-title:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    background: #eee url(http://4.bp.blogspot.com/-N9b72FNobJ4/UK-iWESa4jI/AAAAAAAAAdk/xUOTSzhvQJk/s16/link.png) no-repeat center;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

¿Y cuál es el problema?

Ésto añade una clase llamada tag-[nombreetiqueta] al post (además de una clase has-tags o no-tags dependiendo de si tiene o no etiquetas). Funcionará bien si todas tus etiquetas tienen una sola palabra.

Pero… ¿Y si nombreetiqueta tiene espacios?. Por ejemplo, si tuvieramos una etiqueta llamada fotos bonitas, con el código anterior la clase nos quedaría así: class="post hentry tag-etiqueta1 tag-fotos bonitas". Como comprenderéis este no es el efecto que deseamos.

La solución

La única solución eficaz contra este problema es usar condicionales y mostrar sólo algunas etiquetas. Es decir: poner en condicionales sólo las clases que nos interesan para editar, y editar su nombre para ello. Es un código engorroso y repetitivo, pero es lo que hay, y creo que merece la pena. Recordad reemplazar NOMBRE ETIQUETA 1 por lo correspondiente, y al igual en nombreetiqueta1.

&lt;div class='post hentry<b:if cond='data:post.labels'> has-tags<b:loop values='data:post.labels' var='label'><b:if cond='data:label.name == "NOMBRE ETIQUETA 1"'> tag-nombreetiqueta1</b:if><b:if cond='data:label.name == "NOMBRE ETIQUETA 2"'> tag-nombredeetiqueta2</b:if></b:loop><b:else/> no-tags</b:if>'&gt;

Entendiendo el concepto

Esta parte la hago porque sé que el código puede parecer lioso (los &gt; nos vuelven locos), y más con la falta de espacios. Creo que viene bien para que si alguien tiene interés en aprender por qué funciona, le pueda resultar más fácil. Como siempre, si alguien se queda con alguna inquietud o no sabe cómo implementarlo, que lo pregunte en un comentario. Lo primero que hacemos es convertir el <div> inicial en entidades (los < pasan a ser &lt; y los > pasan a ser &gt;), para que blogger no los trate más como bloques, sino como HTML plano.

Ésto nos permitirá hacer una comprobación (<b:if>) y un loop dentro del propio elemento, iterando sobre las etiquetas del post.

Por poder, se podría poner con tanto espacio y comentario en la plantilla, pero es si cabe más engorroso. La forma tan rara de poner los comentarios es para evitar crear espacios innecesarios en la plantilla (blogger no muestra esos comentarios en la web), pero manteniendo el código legible.

&lt;div class='post hentry<!--
	Comprobamos si el post tiene etiquetas 
--><b:if cond='data:post.labels'><!--
	Si las tiene, añadimos la clase has-tags y hacemos el loop
	--> has-tags<!--
	Hacemos el loop
	--><b:loop values='data:post.labels' var='label'><!--
			Si la etiqueta tiene un nombre especificado añadimos la clase
		--><b:if cond='data:label.name == "NOMBRE ETIQUETA 1"'> tag-nombreetiqueta1</b:if><!--
			repetimos tantas veces como sea necesario (este ejemplo va con "fotos bonitas"):
			En el CSS Podríamos poner:
			.tag-fotosbonitas { background: red; }
			Para que todos los posts con la etiqueta fotos-bonitas tengan el fondo rojo
		--><b:if cond='data:label.name == "fotos bonitas"'> tag-fotosbonitas</b:if><!--
	Acabamos el loop
	--></b:loop><!--
	Si no tiene etiquetas le añadimos la clase no-tags
--><b:else/> no-tags</b:if>'&gt;

12 pensamientos en “Personalizar las entradas de blogger según sus etiquetas

  1. Bitacoras.com
  2. Imagen de Kseso el dijo:

    Interesante como el resto de artículos.
    Sólo un apunte, Emilio:
    ¿Te has planteado no añadirlo como clases sino que la(s) etiqueta(s) sean el valor de atributo rel? Algo así:

    ... rel=" tag1 tag2 .... tagNº"

    De esa manera no importan cuantas etiquetas aparezcan a la hora de declarar estilos, pues recurriendo a los selectores de atributos podemos crear las reglas que nos interesen o bien sólo para unas pocas etiquetas o incluso para combinaciones de ellas. Todo ello con los correspondientes “comodines”: * $ ^…

    [rel="tag1"] {....}
    [rel*="tag1"] {....}
    [rel^="tagNº"] {....}
    [rel="tag1"][class$="algo"] {....}
    

    Además se añadiría una pizca de semántica.
    Un saludo.

    • Imagen de Emilio Cobos Álvarez el dijo:

      No estoy completamente de acuerdo ahí: el atributo rel tiene valores determinados (y bastante estrictos), pero sería lo mismo que hacerlo con cualquier otro atributo (llamémoslo data-rel). Aún así, el resultado sería parecido a usar una clase (si usáramos el primer intento de este artículo sería igual que escribir):

      [class~="tag-etiqueta 1"] {...}

      Siempre feliz de verte comentar por aquí :)

  3. Detectar el último post publicado en blogger | Emilio Cobos-CMC
  4. clases en css diferentes para cada post
  5. Imagen de SidV el dijo:

    Un groso! Llegué a tu blog por el tema del SEO en blogger. Y me quedé leyendo… este artículo que has escrito me viene como anillo al dedo a un template de blogger que estoy viendo si uso. Veré como lo adapto.

    Muchas gracias, sigue así !
    Ojalá vuelvas a escribir algo de blogger pronto ;)

  6. Imagen de enriqueenrique el dijo:

    Tengo un problema al colocar tu código me descuajeringa la pagina poniéndome una especie de velo negro en la parte de los post y moviéndome la barra lateral de widgets abajo de la página y a parte no se donde he de colocar la segunda parte, la parte donde designas la dirección de la imagen. Donde la coloco?

  7. Imagen de GianfrancoUCGianfrancoUC el dijo:

    Hola, he dado con tu web después de estar buscando una alternativa que me diera la opción de cambiarle el diseño a mis entradas con una etiqueta X y gracias a tu esplendida explicación he llegado a conseguirlo. Cuando lo implemente por primera vez , después de modificar el css, caí en la cuenta de que las entradas quedaban como quería que estuvieran pero había un error que hacia que la sidebar se colocara debajo de las entradas, después de releer y dirigirme a la entrada original pude comprobar que tu haces mención que hay que cambiar “los pasan a ser >, para que blogger no los trate más como bloques, sino como HTML plano.” pero que en esta entrada tiene un error pues tu mencionas que: “Y su correspondiente (encima de un ) por >/div<“.

    Si te fijas el ultimo “código” esta puesto “>/div<” cuando debería ser “</div>”. Corregida esta linea todo funciona de maravilla y creo que puede servir esta aclaración para que otras personas como yo lleguen buscando la forma de implementar esta alternativa a nuestras entradas en sus sitios no tengan inconvenientes. Gracias =)

    • Imagen de GianfrancoUCGianfrancoUC el dijo:

      Disculpas, debería haber utilizado las etiquetas.

      Para que se solucione el problema como mencionaba lineas arriba, solo basta modificar >/div< por </div> que va encima de un como se explica en esta misma entrada.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.