Agregando tooltips en las imágenes

JMiur [E]

before es lo que está antes , after es lo que está después ... los pseudo-elementos ::after y ::before resultan ser muy sencillos de manejar y tener infinitas posibilidades ya que nos permiten agregar contenido utilizando el CSS.

leer artículo actualizado

Google: Cumpleaños y curiosidades

Manejando las etiquetas: Excluir o incluir

Etiquetas etiquetas etiquetas etiquetas, habría que hablar de las etiquetas, si sirven o no sirven o mejor dicho para qué sirven pero eso será en otro momento. Las limitaciones de acceso a los datos de Blogger hacen que feeds y etiquetas sean claves a la hora de dar una vuelta de tuerca a este asunto de los blogs y tratar de salirse de los esquemas tradicionales.

Graciela preguntaba en un comentario si era posible excluir etiquetas en el truco que mostraban en La Bloguería

y que utiliza una variante de Cumulus, algo imprescindible si tenemos muchas ya que no está diseñado para soportar demasiados textos.

La respuesta quedará pendiente porque no se me ocurre nada que permita establecer condiciones y trasferírselas al archivo de Flash; sin embargo, como una cosa trae la otra, por ahora, empecemos con alguna prueba sencilla y veamos si es posible listar etiquetas basándonos en alguna condición.

Es sencillo de probar ya que podemos agregar tantos elementos Etiqueta como se nos ocurra y cada uno es independiente del otro así que creamos uno y lo ubicamos en la plantilla. Luego, en Edición HTML expandimos los artilugios y vamos a ver siempre el mismo código:

<b:widget id='LabelX' locked='false' title='El Titulo' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

La única diferencia será el atributo ID que tendrá un número diferente y el atributo TITLE que será el que le demos al crearlo.

NOTAS: En todo ese código, siempre vamos a reemplazar lo marcado en color que es la lista de las etiquetas y en todos los casos estoy excluyendo un dato que coloca Blogger (data:blog.languageDirection) para definir la dirección del texto ya que asumo que estamos escribiendo de izquierda a derecha.

La primera condición es la más sencilla, vamos a mostrar sólo las etiquetas que tengan un mínimo de entradas. Si quisiéramos listar las que tengan más de cinco entradas escribiríamos:

<ul>
<b:loop values='data:labels' var='label'>
<b:if cond='data:label.count &gt; 5'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
(<data:label.count/>)
</li>
</b:if>
</b:loop>
</ul>

En el ejemplo, agregamos una condición al bucle:
SI la cantidad de entradas en la etiqueta (data:label.count) es mayor que 5 la mostramos, sino, la ignoramos.

Quiere decir que podemos establecer cualquier condición numérica y mostrar o no mostrar ciertas etiquetas. Veamos si podemos usar condiciones más sofisticadas, por ejemplo, SOLO mostrar algunas y EXCLUIR otras.

Para eso necesitamos recurrir al JavaScript y generar alguna clase de "lista" (un array) donde agreguemos las etiquetas que queremos evaluar. Supongamos que tenemos seis categorias que, en un rapto de originalidad llamo: primera segunda tercera cuarta quinta sexta.

Este, sería el código para mostrar solamente las etiquetas segunda tercera y sexta:

<ul>
<script type='text/javascript'>
var misEtiquetas = new Array(&#39;segunda&#39;,&#39;tercera&#39;, &#39;sexta&#39;);
<b:loop values='data:labels' var='label'>
var cualEtiqueta = &#39;<data:label.name/>&#39;;
if(misEtiquetas.indexOf(cualEtiqueta) &gt; -1) {
document.write(&quot;<li><a expr:href='data:label.url' rel='nofollow'><span><data:label.name/></span></a>(<data:label.count/>)</li>&quot;);
}
</b:loop>
</script>
</ul>

¿Qué hicimos? Creamos una array llamada misEtiquetas donde colocamos (entre comillas y separadas por comas) la lista de etiquetas a ser mostradas. Luego, en el bucle, tomamos cada etiqueta (cualEtiqueta) y usamos una función (indexOf) para verificar si ese elemento es o no es parte de ese array. Esa función devuelve un valor de -1 si la respuesta es NO y un valor positivo si la respuesta es SI. Cuando verificamos esto último, usamos document.write() para escribir el item.

Lo mismo podemos hacer para excluir catergorías. simplemente, evaluamos la condición contraria; vamos a excluir las categorías segunda y sexta:

<ul>
<script type='text/javascript'>
var misEtiquetas = new Array(&#39;segunda&#39;,&#39;sexta&#39;);
<b:loop values='data:labels' var='label'>
var cualEtiqueta = &#39;<data:label.name/>&#39;;
if(misEtiquetas.indexOf(cualEtiqueta) == -1) {
document.write(&quot;<li><a expr:href='data:label.url' rel='nofollow'><span><data:label.name/></span></a>(<data:label.count/>)</li>&quot;);
}
</b:loop>
</script>
</ul>

¿Y para qué podría servir esto? ¡Ahhhhhh! Esa es una buena pregunta