Cómo pongo la escarapela para personalizar sumarios por su etiqueta o label 30.12.14
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
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.
Kseso
the obCSServer ᛯ 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 Kseso
Esas imágenes de inicio del post siempre hacen que ignore los posts en feedly, felizmente esta vez no lo pasé :)
ResponderEliminarEntonces 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.
EliminarPero 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
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