Como una solución -temporal- podrías seleccionar algunas etiquetas para mostrar, las más relevantes, ¿pero y las demás? obviamente no queremos que el visitante se pierda el conocer todo nuestro contenido, así que propongo en este post modificar el gadget de etiquetas al puro estilo de WordPress; en forma de menú desplegable y que muestre el total de entradas por etiquetas.
El resultado de la optimización se muestra en la siguiente imagen, con el antes y el después.
Etiquetas estilo desplegable |
¿Quieres implementarlo? Es muy fácil, sin más preámbulos veamos los pasos a seguir. No olvides hacer una copia de seguridad de tu plantilla previamente.
Etiquetas desplegables en Blogger
Paso 1.- Ve al panel de diseño y agrega el gadget de etiquetas si aún no lo has hecho.
Paso 2.- Hecho lo anterior dirígete al menú de Plantilla > Editar HTML. Pulsa la combinación de teclas Ctrl+F para buscar en el editor la palabra Etiquetas. Ojo que si le has cambiado el nombre a este gadget debes buscarlo por el que le has asignado.
Paso 3.- ¿La has encontrado? Perfecto, observa que se encuentra en la siguiente línea de código:
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
Es probable que el ID Label1 lo tengas como Label2, Label3...dependiendo de la cantidad de gadgets que tengas. También el título (title) "Etiquetas" con otro nombre, si lo has cambiado como bien lo mencioné en el paso 2.
Código del gadget Etiquetas |
Simplemente selecciona toda esa línea que corresponde al gadget de etiquetas y bórrala (no la expandas). En su lugar pega el siguiente código:
¡Eso es todo! Antes de guardar los cambios, haz una vista previa y si todo está correcto ya tendrás tu gadget de etiquetas desplegable más ordenado y limpio visualmente hablando.
Como un demo te invito a ver el mio, está en la barra lateral y si te gustó no dudes en colocarlo de esta manera en tu blog, que sin duda será favorable en todo sentido tanto para ti como para tus visitas ;-)
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <br /> <select onchange='location=this.options[this.selectedIndex].value;'> <option>Elige una etiqueta</option> <b:loop values='data:labels' var='label'> <option expr:value='data:label.url'><data:label.name/> (<data:label.count/>) </option> </b:loop> </select> <b:include name='quickedit'/> </div> </b:includable> </b:widget>Nota.- Cambia el Label1 por el número de label de tu gadget, opcionalmente puedes cambiar también la frase "Elige una etiqueta" por la que gustes.
¡Eso es todo! Antes de guardar los cambios, haz una vista previa y si todo está correcto ya tendrás tu gadget de etiquetas desplegable más ordenado y limpio visualmente hablando.
Como un demo te invito a ver el mio, está en la barra lateral y si te gustó no dudes en colocarlo de esta manera en tu blog, que sin duda será favorable en todo sentido tanto para ti como para tus visitas ;-)
Muchas gracias, funciona perfectamente.
ResponderBorrarMuchas gracias a ti Juan por comentar, qué bueno saber que las etiquetas te hayan funcionado a la perfección =)
Borrar¡Saludos!
Muy bueno :o me gustó tu blog, lo visitaré más seguido.
ResponderBorrarSaludos!
¡Gracias Camilo! Crack, también te sigo a ti y a tu blog desde ForoBeta =)
BorrarPor cierto, lo he añadido al blogroll de Blogs de Ayuda.
Saludo de vuelta colega!
Buenas, brutal los menús de etiquetas desplegables. Como podria cambiar los colores del menu y letras?, saludos y gracias.
ResponderBorrar¡Muchas gracias Sergio! Para cambiar los colores del menú y las letras (fuente) sigue la siguiente ruta: Plantilla > Personalizar > Opciones avanzadas... y allí encontrarás los ajustes para realizar los cambios en tu blog.
BorrarSaludos y gracias a ti por el comentario.
Hola Marcelo,
ResponderBorrarFantástico el tutorial, andaba yo buscando un desplegable como el que nos enseñas y me he topado contigo. Ya lo he puesto pero me queda al final abierto, no como el tuyo con la flecha. ¿Me puedes indicar como cerrarlo? Te paso el link para que si puedes te pases a verlo.
http://oasisingular.blogspot.com.es/
Grácias !!!
Hola Mar Celis, muchas gracias =)
BorrarEste estilo de menú se adapta automáticamente al ancho de las etiquetas, veo que en tu blog tienes algunas etiquetas muy largas como 'Celebraciones y fiestas/Celebrations & parties' por ejemplo, entonces eso provoca que el menú también se haga ancho.
Para solucionarlo, lo que se me ocurre que puedes hacer, es cambiar el nombre de todas las etiquetas largas, si decides hacerlo sigue con cuidado los pasos de este gran tutorial: http://goo.gl/hBRsUj
Espero que lo soluciones, saludos.
A ti por el comentario, te ha quedado de lujo, éxitos con tu blog :)
ResponderBorrar¡Hola!
ResponderBorrarHa sido genial, muy fácil de hacer gracias a la explicación tan sencilla.
Lo que sí quisiera saber es si me podrías explicar cómo cambiarle el tamaño para que se adapte a mi sidebar (250px) ya que no veo numeración como para cambiarla y no me gusta que se salga de la línea.
Gracias de antemano ^^
Saludos.
¡Hola Paola!
BorrarEn realidad esta modificación del gadget se adapta al tamaño de cualquier sidebar, quizás tengas etiquetas con nombres un tantito largas y por eso se salen de la línea. Fíjate por favor en el comentario de Mar Celis, tal vez sea tu caso: http://goo.gl/bgPuUp
Por cierto, ¿cuál es tu blog?
Saludos.
¡Hola, Marcelo!
BorrarGracias por la contestación. Estoy al tanto de lo que me dices y revisaré a ver cuál es el error, a ver si consigo que me salga algo más ajustado. ^^
Te dejo el blog: "El Rapto de los Sentidos"
http://neftis2o.blogspot.com.es/
Un saludo.
Os cuento lo que me ha pasado a mi por si le pasa a alguien, me daba un error, yo copiaba el código html que dais y lo sustituía por el otro, eso estaba bien, y el error que me daba era porque al pegar me sustituía esta comilla ' por otra diferente arqueada, he tenido que sustituir todas y poner las correctas, es decir estas ' y así ya quedaba todo bien, un error muy tonto, pero os lo cuento por si os pasa a alguno, luego ya salía todo perfecto.
ResponderBorrarMuchas gracias por el dato :) He actualizado la manera en que se mostraba ese código, ahora todo debería pegarse en la plantilla tal cual es.
Borrar¡Saludos!
tengo una pregunta porque en mi blog cuando hago algún cambio por ejemplo poner las "etiquetas" cuando estoy en la vista previa desde el editor de plantilla me aparece que se ha cambiado pero cuando entro a mi blog no aparecen los cambios :/ espero me puedas ayudar amigo.
ResponderBorrarGracias amigo pero solo quisiera saber como le cambio el tamaño ? hacerlo un poco mas grande
ResponderBorrar