Cambiando la etiqueta seleccionada del widget de las etiquetas
Anteriormente les decía, como crear una caja o bloques en los enlaces del widget de las etiquetas.
Hay una limitación, que no tomé en cuenta, y que Blogger define en el código de ese widget, que es, convertir el enlace de la etiqueta seleccionada en texto, es decir, ya no es un enlace, y al no ser enlace, no se aplican los estilos o CSS, que declaramos para cada enlace de la etiqueta:
Luego, cuando les mostraba Como crear botones en los enlaces de las etiquetas, decidí desaparecer el enlace seleccionado, al fin que cuando se estuviera en la página de ese enlace, no se querría volver a ingresar a la misma etiqueta, y de todos modos no sería posible, pues ya no es enlace, es texto, y además, se perdían los estilos declarados y no se veía el botón.
#Label1 span[dir=ltr]{
display: none;
}
Con el código anterior, evitamos cambiar el estilo o mejor dicho, no mostramos la etiqueta seleccionada, solamente cuando está seleccionada.
Pensando en esos casos, y en una solución más estética, podemos convertir la etiqueta seleccionada, en un enlace, y luego, crear una clase, para el enlace de la etiqueta seleccionada, y crear un estilo "diferente", para que nuestros usuarios sepan, que está seleccionada cierta etiqueta, como pasa con el enlace seleccionado, del widget de las páginas estáticas, en las plantillas de Blogger.
¿Suena mejor verdad?, es más sencillo de lo que parece, y habiendo usado los estilos o CSS de cada tutorial que les mencionaba, sólo necesitaremos, cambiar un poco el código del widget de las etiquetas, y declarar algunos estilos (CSS) para el enlace seleccionado, para que luzca diferente.
Como hacerlo paso a paso
Paso 1. Vamos a Diseño ► Edición de HTML, expandimos plantilla de artilugios, y con la ayuda de "Ctrl F", buscamos estas lineas de código:
<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>
Tip: Podemos buscar el "nombre que le pusimos a el Widget", y bajarnos un poco, hasta encontrar esa parte.
Paso 2: Luego, cambiamos la parte resaltada de rojo, por esto:
<b:if cond='data:label.name == data:blog.searchLabel'><a class='seleccionado' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
Nota: Es el que viene al principio después de <li>.
Con el código anterior, estamos convirtiendo el nombre de la etiqueta seleccionada en enlace, y además le estamos agregando una clase, con el fin de crear un estilo diferente para que, un usuario sepa que "está en esa etiqueta".
Paso 3: Ahora declaramos los estilos de la "etiqueta seleccionada", y los agregamos en Añadir CSS, es decir, desde nuestro escritorio, vamos a Diseño ► Diseñador de plantilla► Avanzado► Añadir CSS y lo pegamos ahí en el campo:
Nota: Puse el mismo color de fondo, en el evento :hover (al poner el ratón encima de la imagen).
#Label1 a.seleccionado{
background-color: #f9a6f4; /*Color del fondo del enlace*/
}
Ahora cuando se haga click en un enlace de la etiqueta, sabremos que está seleccionada esa etiqueta, ya que lucirá diferente.
y ¿que pasará, en el caso de los botones en los enlaces de las etiquetas?
Si se quiere lograr lo mismo, que es, convertir el texto de la etiqueta seleccionada en enlace, y poner un estilo diferente al enlace seleccionado, haremos lo mismo, y también, eliminados esta parte del CSS:
#Label1 span[dir=ltr]{display:none;}
¿Y la demostración?
La demostración de los botones lo puedes ver aquí en mi blog, selecciona una etiqueta y observa lo que pasa, en el enlace o etiqueta seleccionada, y en el caso de la cajita o bloques en los enlaces puedes ver el mismo blog de prueba.
Funciona en todos los navegadores, incluyendo el único e inigualable IE6 (Internet explorer 6).
Nota:
Actualización: Ahora puedes navegar entre las páginas de etiquetas, y el enlace seleccionado conservará el estilo asignado con CSS ;)
Cualquier inquietud, duda o comentario, no dudes en hacerla :)
Etiquetas:Editar plantilla,Tutoriales