Cómo pongo la escarapela para personalizar sumarios por su etiqueta o label

De cómo resaltar los sumarios de los artículos en función de que tengan una etiqueta determinada.

Cómo pongo la escarapela para personalizar sumarios por su etiqueta o label

Por Kseso ✎ 3
Escarapela para resaltar artículos por su etiqueta o label

Desde hace unas fechas, en em índex y en los resultados de búsqueda del blog, resalto los artículos que contienen demostraciones o demos con una pequeña escarapela que incluye la palabra demo.

Tras ello hay quienes se han interesado por la forma en que lo hago. Así que decidí, pese a lo simple y sencillo que es, hacerlo en un post en vez de responder de forma privada.

Así que de eso va esta entrada: de cómo resaltar los sumarios de los artículos en función de que tengan una etiqueta determinada. Y pese a que este blog esté en la plataforma Blogger nada impide hacer lo mismo en otros CMS.

El Html

Lo primero que tienes que asegurarte es que incluyes en los resúmenes que muestras en el índex el código que genera las etiquetas. En Blogger es el siguiente:

<b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' itemprop='keywords' rel='tag'> <data:label.name/> </a> <b:if cond='data:label.isLast != "true"'/> </b:loop>

El b:loop irá, como es lógico, incluido en sus correspondientes condicionales y allí donde quieras que se muestren las etiquetas.

Pero si estás en mi caso y no deseas mostrarlas basta con añadirles la clase oportuna, yo le asigné una ya existente en mi css class='hide' para ocultarlas con su display: hidden

A continuación del código anterior incluyo el elemento que quiero que aparezca. Yo uso un svg ubicuo mostrado con el elemento <use xlink:href='#...

<svg class='ribbon-demo' viewBox='0 0 95 76'> <use xlink:href='#ribbon-demo' /> </svg>

Volvamos al loop de las etiquetas. El html generado por él son una serie de enlaces que tienen una particularidad. Cada uno termina su href con la palabra de la etiqueta:

<a href="http://ksesocss.blogspot.com/search/label/demo" ... /a>

En caso de que sean dos o más palabras las que forman la etiqueta los espacios en blanco de separación los sustituye por %20

El Css

Bien. Ya tenemos los enlaces de la etiqueta, que no muestro, y un elemento que se mostraría en todos los resúmenes de los artículos. Es hora de una pizca de Css.

Así que lo primero es ocultar la escarapela distintiva. Como le había dado una clase es sencillo:

.ribbon-demo { display: none; }

Hecho lo cual, sólo nos resta mostrarla sí y sólo sí el artículo incluye la etiqueta deseada. O lo que es lo mismo, si el enlace de "la etiqueta" termina por dicha palabra.

Para esto vienen al pelo los selectores por valor de atributo. Más concretamente el selector Css por subcadena teminal del atributo y en conjunción con el combinador de hermano ~ :

[href$='demo'] ~ .ribbon-demo { display: block; /* resto de declaraciones */ }

Extrapolar a otros CMS

En caso de que utilices otro gestor para tu blog, sólo cambiaría el código que genera las etiquetas en la parte relativa al Html.

Y si lo que deseas es, en vez de poner la escarapela, estilizar el resumen o sumario del post, sólo necesitas que las etiquetas sean hermanas de dicho sumario y sustituir el selector .ribbon-demo de mi caso por la clase que tenga el resumen.

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 3

  1. Esas imágenes de inicio del post siempre hacen que ignore los posts en feedly, felizmente esta vez no lo pasé :)

    ResponderEliminar
    Respuestas
    1. Entonces creo que has ameritado que te fecilite y de la enhorabuena porque por una vez no te has dejado llevar por la superficialidad de una imagen méramente ornamental.

      Pero fíjate que no soy yo el que más pierde por tu escala de valores a la hora de valorar si un artículo te puede aportar algo o no. Eres tú.

      Un saludo

      Eliminar
    2. Feedly y sus previews hacen que el zapping de la TV pase ahora a los lectores de feeds por la internet... por cosas como esas aún extraño al viejo Google Reader :(

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap