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.





Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

LABELS

Adsense dispositivos moviles (2) Alojamiento web (12) Amp en Blogger (15) Amp HTML (5) Amp Html Premium (5) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (36) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (3) Configurar dominio de Godaddy en Blogger (2) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (21) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (4) Ganar Dinero (22) Google (11) Google Adsense (13) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (14) Material Design Blogger (9) Medios de Comunicacion Social (38) Menu desplegable (20) Menu Responsive para Blogger (7) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (44) Plantillas Landing page para Blogger (5) Popout (6) Posicionamiento SEO (23) Publicidad (2) SEO Mobile (13) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (74) Widgets Suscripciones (9) Widgets y Plugins (5)

FORMULARIO DE CONTACTOS