Gadget de etiquetas. Problemas y mejoras | Oloblogger Una vez que hemos dado una breve explicación sobre qué son y para qué sirven las etiquetas , veamos cómo funciona el código para poder soluc...

18 de febrero de 2009

Gadget de etiquetas. Problemas y mejoras

Una vez que hemos dado una breve explicación sobre qué son y para qué sirven las etiquetas, veamos cómo funciona el código para poder solucionar algunos problemas comunes e incluso, introducir algunas variantes.

Este es el código del widget que crea Blogger para las Etiquetas y que tras su instalación en la barra lateral, aparece dentro de la SECCION de la referida sidebar. O sea, justo después de <b:section class='sidebar' id='sidebar' preferred='yes'>, si no lo hemos movido de sitio tras crearlo. Se incluyen unas breves notas sobre lo que hace cada parte.

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'> <!-- Muestra el título del gadget si existe -->
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul> <!-- Comienza la lista -->
<b:loop values='data:labels' var='label'><!-- Principio bucle para mostrar todas las etiquetas -->
<li> <!-- Elemento de la lista -->
<b:if cond='data:blog.url == data:label.url'> <!-- Si estamos viendo una etiqueta concreta, se muestra sin enlace -->
<span expr:dir='data:blog.languageDirection'>
<data:label.name/> <!-- Nombre etiqueta sin enlace -->
</span>
<b:else/> <!-- Resto de etiquetas con enlace ->
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'> <!-- Enlace a etiquetas -->
<data:label.name/> <!-- Nombre etiqueta con enlace -->
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span> <!-- En todos los casos se muestra el número de entradas de cada etiqueta -->
</li>
</b:loop> <!-- Termina el bucle -->
</ul> <!-- Termina la lista -->
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Conociendo su funcionamiento, podemos arreglar algunos problemas y también incorporar algunos datos más:

* No deseo mostrar el título del artilugio: La primera opción sería editarlo desde Elementos de Página y dejarlo sin título, pero también se puede conservar para distinguir a simple vista unos gadgets de otros, borrando las tres líneas...
<b:if cond='data:title'> <!-- Muestra el título del gadget si existe -->
<h2><data:title/></h2>
</b:if>


* Los nombres de las etiquetas no enlazan a la correspondiente categoría: Falta la etiqueta <a... y la expresión que forma el enlace o la expresión está mal redactada:
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'> <!-- Enlace a etiquetas -->
<data:label.name/> <!-- Nombre etiqueta con enlace -->
</a>

* No se muestra el número de post para cada categoría: Eso es porque en nuestro widget falta la etiqueta data que contiene la cantidad.
</b:if>
<span dir='ltr'>(<data:label.count/>)</span> <!-- En todos los casos se muestra el número de entradas de cada etiqueta -->
</li>


* Aunque esté viendo una categoría concreta, esa categoría permite enlazar: La estructura b:if -b:else -/b:if, para excluir la categoría visualizada no existe o está mal construida. En ese caso es suficiente con reconstruir el código con la muestra que hay al principio del post.

* Incorporar a los nombres de las etiquetas una marca de lista: En este caso, podemos incorporar una etiqueta STYLE a los elementos LI, bien con un símbolo o bien con una imagen diseñada por nosotros. En este último caso, conviene que sea una imagen pequeña, tipo favicon, más o menos formando un cuadrado de lado igual a los pixels de alto que tiene la letra que tengamos definida para la SIDEBAR.
<b:loop values='data:labels' var='label'><!-- Principio bucle para mostrar todas las etiquetas -->
<li style='list-style-type:circle;' > <!-- Elemento de la lista -->
<b:if cond='data:blog.url == data:label.url'> <!-- Si estamos viendo una etiqueta

Circle, square o disc son los tipos que más se usan. Para una imagen, hay que usar 'list-style-image:url(DIRECCCION_IMAGEN);'

* Incorporar a los nombres de las etiquetas un icono para permitir la suscripción del feed de ese tema concreto: Hay que poner al principio de cada elemento de la lista, una expresión de enlace al feed de la categoría y la imagen del icono que será la que sirva de enlace al usuario.
<li> <!-- Elemento de la lista -->
<a expr:href='data:post.url + "/feeds/posts/default/-/" + data:label.name'><img src='URL_imagen'/></a>
<b:if cond='data:blog.url == data:label.url'> <!-- Si estamos viendo una etiqueta concreta, se muestra sin enlace -->

En el siguiente enlace, tienes una recopilación de iconos para feed. Una vez escogido el que te guste, tienes que cambiar su tamaño hasta dejarlo aproximadamente en 16x16 pixels. Luego lo alojas en tu servicio habitual, copias la dirección y la pones en su sitio.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

38 comentarios :

  1. Muchas gracias.
    Ahora me toca pararme y reprocesar todo esto, soy muy lenta para eso.
    Como me tratáis bien y me solucionáis los problemas, seguro que volveré a ser pesada.
    Un saludo

    ResponderEliminar
  2. Ya está aquí de nuevo la pesada (no duds en mandarme a paseo en cuanto lo consideres conveniente).
    Me acabo de fijar en una cosa en mi blog (plantilla aspire). En las columnas de la derecha, todas las cosas que hay en ellas, listas, imágenes, etc, están dentro de un dibujo tipo pergamino. Sin embargo, el que corresponde a las etiquetas sólo tiene el dibujo del título y la parte final (a partir de la p). Entre el título y esa parte han desaparecido (o nunca las hubo, no sabría decir) las líneas del dibujo. ¿Hay algo mal o simplemente la lista es demasiado larga?
    Gracias
    Un saludo y perdón por mi pesadez.

    ResponderEliminar
  3. Es un problema de tamaño Mujer Quijote. Esta es la imagen que utiliza tu plantilla...
    http://www.webpagedesign.ws/aspire/sidebarbottom.jpg
    ...y, evidentemente, esa lista es más larga que esa imagen.

    Je, je... Acabo de ver el enlace que has puesto sobre este blog. ¡Me gusta el subtítulo que lo acompaña! Lo de ONG me ha matao..

    ResponderEliminar
  4. Al César lo que es del César, :0)

    ResponderEliminar
  5. Creo que tengo otro problema que no mencionas.
    Eh etiquetado algunas entradas y cuando le pico me salen bien peeeeeero el problema es que me sale el nombre del titulo del blog y no quiero que suceda esto porque lo eh remplazado por una imagen y se ve feisimo

    ResponderEliminar
  6. Warmihaya, dime en que blog te pasa que lo vea. He pinchado en todos los de tu perfil (que son muchos) y no he visto eso que dices en ninguno.

    ResponderEliminar
  7. Hola, me gustaría saber si puedo cambiar el color de la letras de las opciones de la encuesta, y cómo. Tengo la columna de color negro y las letras del gadget son tb negras, el título es blanco, no podría cambiarse a blanco también? Gracias!

    ResponderEliminar
  8. Wenas, yo lo que quiero saber es como poner la nube de etiquetas, similar a la que sale en la primera imagen. He tocado demasiadas cosas pero sigue sin aparecerme asi.

    ResponderEliminar
  9. - DäO: Quizás no puedas cambiar el color de las letras, pero seguro que sí puedes cambiar el del título y el del fondo de las preguntas. Más información

    - AdRy': Echa un vistazo al post de ayer (19-03-2009). Ahí se explica un código sin problemas.

    ResponderEliminar
  10. hola oloman! hace tiempo que no escribo por aquí, pero ya tengo mi blog a pleno rendimiento con un aspecto estupendo gracias a tu ayuda.
    Ahora quería empezar a limar algunos detalles ya que lo más gordo lo tengo resuelto, ya que muy pronto pasaré el blog a .es
    Mi pregunta respecto a las etiquetas es si hay forma de hacer que el listado aparezca en forma de botones, no se si me explico bien :s

    ResponderEliminar
  11. Hola Esther. Un post para explicar lo que necesitas acaba de ser publicado :)
    Saludos

    ResponderEliminar
  12. Tengo Un Problema Trate De Colocar Una Imagen De Lante De Las Etiquetas Pero Solo Sale La Mitad De La Imagen No Sale Completa. ¿Qué Estoy Haciendo Mal?

    ResponderEliminar
  13. Poder ver tu blog ayudaría, pero intentando adivinar, puede que la imagen sea muy grande para el espacio disponible.

    La próxima vez indica tu dirección o comenta con el nick de tu perfil.

    ResponderEliminar
  14. Lo Siento Pense Que Mi NicK Saldria Pero No Había Ingresado Aún...xD. Bueno Como Te Decía La Imagen Que Eh Puesto Es de 16x16 y Aún Así No Se Aprecia, Ademas Tambien Parece Estar Muy Separado Del Nombre De La Etiqueta...

    ResponderEliminar
  15. Hola MomomonKy. Eso lo tienes que arreglar ajustando el PADDING y el MARGIN izquierdos, así como el TEXT-INDENT de esta parte de tu CSS:

    .sidebar ul {
    list-style:none;
    margin:0 0 0;
    padding:0 0 0;
    }
    .sidebar li {
    margin:0;
    padding-top:0;
    padding-right:0;
    padding-bottom:.25em;
    padding-left:15px;
    text-indent:-15px;
    line-height:1.5em;
    }

    Esta parte es la que maneja las listas en tu barra lateral. Comienza por quitar todos estos atributos en esas dos clases(cópialos en un bloc de notas por si tienes que reponerlos) y luego ajusta lo que necesites.

    ResponderEliminar
  16. Disculpa La Demora. No Entendi Bien Que Tengo Que Borrar Lo Que Me Indicas o Solo Dejar Los Digitos En 0?, Coloque Todo En 0 y No Pasa Nada...¿?

    ResponderEliminar
  17. Pues en tu blog yo veo ya correctamente los marcadores verdes que antes se veían a medias ;)

    Ya se ve bien en Firefox. Ahora falta optimizar para IE. Prueba ahora a colocar algo de margen izquierdo.

    ResponderEliminar
  18. Hola!
    Me encanta tu blog!!! Felicidades!
    Soy nueva en esto de los blogs y seguramente la pregunta es una tontería, pero no se qué pasa.

    Tengo la plantilla Notepad chaos y en las etiquetas no me sale el número de ocurrencias. He puesto el código que has indicado en este post y el número me sale justo debajo de la etiqueta, en una nueva línea vacía.

    A qué es debido? Muchas gracias!!!

    ResponderEliminar
  19. No lo he podido ver porque ahora no lo tienes instalado, pero puede ser que además de la etiqueta DATA que se indica, hayas puesto algún salto de línea sin querer o incluso un LI o /LI de más.

    ResponderEliminar
  20. Hola Oloman.
    Ya está solucionado.
    Lo he puesto justo detrás de los dos "data:label.name" y sin la etiqueta "span".

    De la otra forma no funcionaba.
    Muchas gracias!!!

    ResponderEliminar
  21. Entonces perfecto, Eloweyn.

    ResponderEliminar
  22. Hola guapo, tengo un minúsculo problema.

    Intento encontrar el RSS que correspondería a mis etiquetas del blog pero mientras que en las sencillas funciona (gracias a tí, por cierto) en las que tienen un espacio no. Me explico:

    http://www.elladooscurodelceluloide.com/feeds/posts/default/-/Curiosidades FUNCIONA


    Pero http://www.elladooscurodelceluloide.com/feeds/posts/default/-/Cine-italiano ; Cine italiano ; o incluso Cine%italiano NO FUNCIONA.

    ¿Se te ocurre donde puede estar el problema?

    ResponderEliminar
  23. ¿Dónde está el smiley del sonrojo? ;)

    Cambia el espacio por un %20 y te debe funcionar.

    http://www.elladooscurodelceluloide.com/feeds/posts/default/-/Cine%20Italiano

    ResponderEliminar
  24. ¡¡TE QUIERO!!!

    ¿Puedo pedirte en matrimonio?

    Va perfectamente. ¡Eres un genio! (Busca ahora el sonrojo)

    ResponderEliminar
  25. Lo siento Ana, llegas algo tarde :)

    ResponderEliminar
  26. Je hola lo que pasa es que intento cambiar el titulo de un gadget por el de una imagen me ayudas!!
    No escribas otro comentario ayudandome escribeme al mail: chamaco_juan@hotmail.com

    Gracias

    ResponderEliminar
  27. Tienes que buscar el título del gadget que por lo general, estará entre etiquetas H2. Cambias esa parte del código por una imagen y listo.

    Lo siento, pero no acostumbro a utilizar el correo para las consultas.

    ResponderEliminar
  28. hola oloman, ¿me puedes decir cuál es tu entrada sobre cómo modificar la nube de etiquetas que viene en blogger por defecto? gracias (en mi navegador no accedo a tu buscador, los siento!!)

    ResponderEliminar
  29. Creo que desde la página Inicio no da problemas Dime de todas formas qué navegador es para ir controlando.

    Para que la nube de etiquetas parezca más una nube

    ResponderEliminar
  30. fenomenal!! gracias olomán

    ResponderEliminar
  31. Hola Oloman,

    Aquí va una preguntilla, en el blog tengo etiquetas a modo de menú y cuando pincho en una de ellas al principio de la pagina me aparece este texto "Mostrando las entradas más recientes con la etiqueta De tiendas Mostrar las entradas más antiguas" se podría quitar?? Mi blog es www.estelepatia.com

    Gracias!!

    ResponderEliminar
  32. Has tenido suerte Telepatía. Lo tengo redactado de hace poco aquí:
    http://oloblogger.blogspot.com/2010/11/cabecera-para-paginas-de-etiquetas.html
    Saludos.

    ResponderEliminar
  33. Hola, necesito ayuda en algo muy basico. Entiendo el concepto de etiquetas y he tratado de aplicarlas en mi blog. Pero resulta que cuando abro la Pagina de Elementos y debo clickear sobre Agregar elementos, no lo puedo hacer pues no tiene link a ninguna parte, no se abre ninguna ventana tal como lo explica el tutorial de Blogger. Como soluciono esto? Nunca he trabajado HTML. Gracias

    ResponderEliminar
  34. Marianela, el camino exacto es Diseño->Añadir gadget. Es el mismo en el escritorio clásico que en el nuevo y no es HTML, sino precisamente una utilidad para que no tengas que entrar a programar en lenguaje alguno.

    Si sigues sin encontrarlo, haz una captura de pantalla, la guardas en algún hosting de imágenes y me pasas el enlace para que vea por dónde andas.

    ResponderEliminar
  35. Hola!! Enhorabuena por el blog que me parece de lo mejorcito. UHe estado buscando, pero no esncuenro una cosa que me parecería muy útil.No sé si es porque no se puede hacer.

    Se trata de poder buscar los posts que contengan más de una etiqueta.

    Ejemplo: Imagínense que tenemos un blog sobre coches. Estaría bien que pudieramos buscar posts, usando menus desplegables. Podria haber uno de marcas, otro de tipo (deportivo, familiar etc), otro diesel/gasolina etc.

    De esta manera podríamos encontrar los posts que realmente buscamos.

    ¿Es esto posible?

    ResponderEliminar
  36. Por si no se me ha entendido, a lo que me refiero es a poder buscar entradas que contengan no una, sino varias etiquetas concretas, para poder afinar la búsqueda. Muchas gracias!!!

    ResponderEliminar
  37. Pimp, lo siento pero hoy por hoy desconozco la manera de hacer categorías y subcategorías con las etiquetas de Blogger, que creo que es más o menos la idea que llevas. Para suplir eso, servidor usa algo más sencillo, que es el buscador interno que puedes ver arriba del todo.

    ResponderEliminar