Cambiar mis etiquetas por un menú desplegable

Es momento de traerles nuevas formas de embellecer a nuestro blog de Blogger, con un widget de etiquetas, el cual nos mostrara un menú desplegable de todas sus etiquetas de blog de Blogger. Este servicio solo sirve para los que usan la plataforma de Blogger. Antes que nada quiero mencionarles que he publicado algunos Slideshow automáticos y uno manual, también podrán revisarlo en mi blog. Ahora la configuración de la etiqueta y para transformarlo en un menú desplegable es tan simple como abrir su blog de blogger. Los pasos son muy sencillos, he tratado de ser lo mas explicativo posible. Con este menú de etiquetas ustedes podrán ahorrar espacio en su sidebar. Luego de haberles explicado un poco cual es su función, nos dirigimos a ver primero nuestro blog de pruebas en la cual ustedes podrán ver su funcionamiento, el widget que se encuentra alojado en mi blog de demos se llama “Categorías”, cuando ingresen ahí podrán ver su funcionamiento.

Cambiar mis etiquetas por un menú desplegable

Primero mire su demostración en nuestro blog de demos


Luego de que hayan visto su demostración ahora si vamos a trabajar.

1 Dirígete a diseño

2 Abre “Añadir un gadget

3 Busca un widget que dice “Etiquetas”, ábrelo y cambia el nombre por el que tu quieras o déjalo tal como esta, luego le das un clic en “Guardar”, ubícalo donde quieres que se muestre, y si ya tienes habilitado el widget de etiquetas, sáltate este paso y dirígete al siguiente.

4 Ahora vamos abrir “Plantilla” y damos un clic en “Editar HTML” 

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

Cambiar mis etiquetas por un menú desplegable

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

Cambiar mis etiquetas por un menú desplegable
Busca este código

<b:loop values='data:labels' var='label'>

Luego de que hayas encontrado el código, te mostrara un código como el que te dejo a continuación:

<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>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>


El código que encontraste debes borrarlo y sustituirlo por el siguiente código a continuación:

<br/>
<select class='menu-etiquetas' onchange='location=this.options[this.selectedIndex].value;'>
<option>Selecciona una categoría</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>


6 Luego de que hayas insertado el código, dale un clic en “Guardar plantilla” y dirígete a tu blog para que mires tus cambios, eso es todo.

Ahora ya tienes un hermoso menú con tus etiquetas

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber

Saludos.


Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

17 comentarios:

  1. Amigo e tratado de busca el primer codigo y nada que lo encuentro lo eh buscado por 3 dias y nada!

    ResponderEliminar
  2. hola Kevin Soto, en este momento estoy conectado en gmail. Esta es mi direccion: ayudadeblogger@gmail.com
    Te puedo ayudar directamente, algo debes estar haciendo mal, pero si quieres escribeme y te ayudare por interno para quelogres realizar el truco, es muy sencillo, he sido lo mas explicativo posible.
    Saludos.

    ResponderEliminar
  3. Buenas noches Luis.
    Ando buscando información y me he topado con tu pagina, y leyendo esta sección, tengo un problema y no lo puedo resolver, o mejor dicho no se.

    Estoy creando un blog para una empresa, y ya solo me faltan detalles por corregir, mi problema es el siguiente.
    http://autocentrodelautomovil.blogspot.com.es/
    El menú que tengo esta compuesto por etiquetas, funciona todo correctamente, pero al ir intercambiando entre paginas, nunca sabes en que pagina estas, porque la pestaña de la etiqueta siempre esta del mismo color, y no se como hacer para ponerle otro colo cuando la pagina este activa.
    Espero haberme expresado medio bien.
    Un saludo y gracias.

    ResponderEliminar
  4. Hola Autocentro, el truco es muy facil y sencillo de realizarlo he visto tu blog y esta muy bien te felicito has realizado un buen trabajo, en cuestion a tu pregunta el truco en blogger es facil, diriget a plantilla, abre edicion de html y en continuar y en /* Variable definitions
    ==================== busca el link correspondiente de cambio de color de etiquetas, espero te haya sido de mucha ayuda si no lo encuentras nos podemos contacto por interno para poder explicarte claramente y darte una mano. Ok. Segun lo que yo veo tu estas dirigiendo muchas etiquetas para una sola entrada, osea estas compartiendo con todas la etiquetas de tu blog, y eso no es asi, por ejemplo yo le di un clic a Ofertas, y me muestra todo lo que tienes en la etiqueta de ofertas, pero tambien muestra las otras etiquetas asociadas, y eso no debe ser asi, si vas a poner varios articulos solo activa la etiqueta correspondiente y no mescles con las otras etiquetas ya que al usuario lo haces confundir y no sabra para donde ir.
    Saludos..

    ResponderEliminar
  5. Buenas!! Me alegro de que te haya gustado.trabajo me esta costando,jej.
    Respecto a la pregunta...no consigo hacer lo que quiero.
    No se como se llama el apartado exactamente, por mucho códigos de color que cambio, ninguno es.
    Le agradecería la ayuda.
    No se donde escribirle para, mandarle mensajes internos.
    P.D;: gracias por el consejo de las etiquetas.
    Un saludo y muchas gracias.

    ResponderEliminar
  6. Realmente te agradezco este tutorial, me ha ayudado enormemente, hacia tiempo buscaba algo asi.
    Saludos

    ResponderEliminar
  7. Hola Sr. H, gracias por su comentario, cualquier pregunta no dudes en hacermelo saber y de inmediato te respondere.
    Saludos.

    ResponderEliminar
  8. Me encantó el menú despegable, ya lo puse. El único problema que tuve fue que se sale del área de los widgets, pero supongo que es porque tengo por estrecha esa área. Igual la voy a hacer más ancha para que quede lindo.
    Gracias

    ResponderEliminar
    Respuestas
    1. Hola, espero lo hayas logrado con exito y ponerlo bien.
      Saludos.

      Eliminar
  9. hola luis, he ido a plantilla y no encuentro por ningun sitio la primera entrada que comentas.
    agradeceria tu ayuda.
    saludos

    ResponderEliminar
    Respuestas
    1. Hola, he actualizado este post, ahora si, sigue las instrucciones y lo podrás conseguir
      Saludos.

      Eliminar
  10. hola luis, soy yo otra vez. pero es que tampoco encuentro ese codigo, estoy utilizando blospot.com igual es porque utilizo la plantilla del blog o no se realmente lo que es. en cualquier caso me puedas ayudar o no te lo agradezco igualmente por el interes.
    saludos

    ResponderEliminar
    Respuestas
    1. Agregame al chat de gmail para poder guiarte directamente.
      Saludos.

      Eliminar
  11. hola luis, cual es tu correo para poder agregarte al chat?

    ResponderEliminar
  12. si quieres te hago una captura de pantalla del editor html y tu mismo podras comprobar lo que pasa.
    saludos

    ResponderEliminar
    Respuestas
    1. Hola esta es la direccion de mi correo: ayudadeblogger@gmail.com
      Saludos.

      Eliminar
  13. Gracias, llevaba mucho tiempo buscando esto. No me esperaba que fuera tan fácil. El cambio en la vista de plantilla de blogger nos despista mucho a la hora de encontrar los códigos.
    Mi pregunta: como cambiar el color de fondo, de las letras, ancho, etc... del menú desplegable.

    ResponderEliminar