Menú desplegable para blogger nuevo estilo


Los menús desplegables para blogger le dan a nuestro blog de blogger una estructura única de un diseño web profesional. Obtener nuevos y fabulosos trucos para blogger es lo que van a aprender en esta página web. Ayudadeblogger.com les presenta un nuevo menú desplegable para blogger, para que lo utilicen en su blog de blogger profesionalmente. Este nuevo menú desplegable para blogger funciona en todos los navegadores web como, Firefox, Google Chrome, Internet Explorer etc. La inserción del código es muy fácil de realizarlo, primero insertaremos un código CSS en el Editor HTML de nuestra plantilla, luego copiaremos otro código y lo pondremos en un widget y listo funcionara de maravilla en nuestro blog de blogger.

Menú desplegable para blogger

Anteriormente publique algunos Menús desplegables para blogger, de los cuales les dejo los enlaces.

  1. Como agregar un menú para mi blog de blogger con un solo widget
  2. Como hacer un Menú vertical desplegable para mi blog de blogger
  3. Como hacer un menú horizontal con submenús y buscador integrado para blogger
  4. Crear un menú desplegable en Blogger
  5. Menu Jquery para blogger
  6. Menú desplegable para blogger
  7. Menú desplegable para blogger Mega menú V2
  8. Menú desplegable para blogger con imágenes
  9. Menú desplegable para blogger nuevo estilo CSS3
A continuación mire su demostración en mi blog de demos


Les gusto verdad!

Vamos a trabajar

1 Ir a blogger

2 Da un clic en “Plantilla

Menú desplegable para blogger

3 Un clic en “Editar HTML

Menú desplegable para blogger

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

Menú desplegable para blogger

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.

Menú desplegable para blogger

Busca este código

]]></b:skin>

Inserta el siguiente código CSS justo arriba del código que encontraste

/* Drop Down Menu start by ayudadeblogger.com */
ul.dropdown li a {
 display: block;
 padding: 3px 8px;
}
ul.dropdown li {
 padding: 0;
}

ul.dropdown li.dir {
 padding: 7px 20px 7px 12px;
}
ul.dropdown ul li.dir {
 padding-right: 15px;
}
ul.dropdown ul a {
 padding: 4px 5px 4px 12px;
}
ul.dropdown ul a:hover {
 padding: 3px 5px 3px 11px;
 border: solid 1px #ddd;
 background-color: #eee;
 font-weight: bold;
}
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}
ul.dropdown li {
 float: left;
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}
ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}
ul.dropdown ul li {
 float: none;
}
ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}
ul.dropdown li:hover > ul {
 visibility: visible;
}
ul.dropdown {
 font: bold 12px Arial, Helvetica, sans-serif;
}
    ul.dropdown li {
     padding: 3px 12px;
     background-color: #000;
     color: #fff;
    }

    ul.dropdown li.hover,
    ul.dropdown li:hover {
     background-color: #222;
    }
    ul.dropdown a:link,
    ul.dropdown a:visited { color: #fff; text-decoration: none; }
    ul.dropdown a:hover { color: #fff; text-decoration: underline; }
    ul.dropdown a:active { color: #fff; }

    /* -- level mark -- */

    ul.dropdown ul {
     margin-left: -6px;
     width: 170px;
     padding-bottom: 9px;
     background: url(http://4.bp.blogspot.com/-MwgiNzVwW8Q/UIixwkBTy5I/AAAAAAAAFdg/0UQSjWZV1zU/s1600/dropdown_pane.png) 0 100% no-repeat;
     color: #000;
     font-size: 11px;
     font-weight: normal;
    }

        ul.dropdown ul li {
         background-color: transparent;
         color: #000;
        }

        ul.dropdown ul li.hover,
        ul.dropdown ul li:hover {
         background-color: transparent;
        }

        ul.dropdown ul li.empty {
         padding: 12px 12px 7px !important;
         font-weight: bold;
        }

        ul.dropdown ul a:link,
        ul.dropdown ul a:visited { color: #000; }
        ul.dropdown ul a:hover { color: #000; text-decoration: none; }
        ul.dropdown ul a:active { color: #000; }

        /* -- level mark -- */

        ul.dropdown ul ul {
         display: none;
        }
/* -- Supporting class `dir` -- */
ul.dropdown *.dir {
 padding-right: 12px;
 background-image: none;
 background-position: 100% 50%;
 background-repeat: no-repeat;
}

Ahora es momento de dar un clic en “Guardar plantilla

4 Da un clic en “Diseño

Menú desplegable para blogger

5 Abre un gadget “Añadir un gadget

Menú desplegable para blogger

6 Busca el widget que dice “HTML/Javascript” ábrelo e inserta el siguiente código en su interior

Menú desplegable para blogger

<ul class="dropdown dropdown-horizontal" id="nav">
<li><a href="/">Inicio</a></li>
<li><a class="dir" href="Su link URL aqui">Blogger</a>
<ul>
<li class="empty">Blogger</li>
<li><a href="Su link URL aqui">Ganar dinero</a></li>
<li><a href="Su link URL aqui">Internet</a></li>
<li><a href="Su link URL aqui">Blogs</a></li>
<li><a href="Su link URL aqui">Soluciones</a></li>
<li class="empty">Eventos</li>
<li><a href="Su link URL aqui">Diseño</a></li>
<li><a href="Su link URL aqui">Diseño web</a></li>
<li><a href="Su link URL aqui">SEO</a></li>
<li><a href="Su link URL aqui">Marketing</a></li>
<li><a href="Su link URL aqui">Problogger</a></li>
<li><a href="Su link URL aqui">Widgets</a></li>
</ul></li>
<li><a class="dir" href="Su link URL aqui">Ganar Dinero</a>
<ul>
<li><a href="Su link URL aqui">Dinero</a></li>
<li><a href="Su link URL aqui">Ganar dinero</a></li>
<li><a href="Su link URL aqui">SEO</a></li>
<li><a href="Su link URL aqui">Soluciones</a></li>
<li><a href="Su link URL aqui">Menus</a></li>
<li><a href="Su link URL aqui">Empresa</a></li>
<li><a href=" Su link URL aqui ">Aplicaciones</a></li>
</ul></li>
<li><a class="dir" href="Su link URL aqui">Widgets para blogger</a>
<ul>
<li><a href="Su link URL aqui">Widgets</a></li>
<li><a href="Su link URL aqui">Blogger</a></li>
<li><a href="Su link URL aqui">SEO</a></li>
<li><a href="Su link URL aqui">Diseño web</a></li>
<li><a href="Su link URL aqui">Plantillas</a></li>
<li><a href="Su link URL aqui">Mi sitio</a></li>
</ul></li>
<li><a class="dir" href="Su link URL aqui">Slideshow</a>
<ul>
<li class="empty">Blogger</li>
<li><a href="Su link URL aqui">Slideshow</a></li>
<li><a href="Su link URL aqui">Blogger</a></li>
<li><a href="Su link URL aqui">Dinero</a></li>
<li><a href="Su link URL aqui">Menus</a></li>
<li class="empty">Plantillas</li>
<li><a href="Su link URL aqui">Plantillas Blog</a></li>
<li><a href="Su link URL aqui">Profesional</a></li>
<li><a href="Su link URL aqui">Taggui</a></li>
</ul></li>
<li><a class="dir" href="Su link URL aqui">Servicios</a>
<ul>
<li><a href="Su link URL aqui">Blogger</a></li>
<li><a href="Su link URL aqui">Comunidad</a></li>
<li><a href="Su link URL aqui">Servicios</a></li>
<li><a href="Su link URL aqui">Marcas</a></li>
<li><a href="Su link URL aqui">Backlinks</a></li>
<li><a href="Su link URL aqui">Menus</a></li>
<li><a href="Su link URL aqui">Cuentas</a></li>
</ul></li>
<li><a class="dir" href="Su link URL aqui">Menus</a>
<ul>
<li><a href="Su link URL aqui">Menus blog</a></li>
<li><a href="Su link URL aqui">Blogger</a></li>
<li><a href="Su link URL aqui">Dinero</a></li>
<li><a href="Su link URL aqui">Ganar dinero</a></li>
<li class="empty">Internet</li>
<li><a href="Su link URL aqui">Servicios</a></li>
<li><a href="Su link URL aqui">Descargas</a></li>
</ul></li>
<li><a class="dir" href="Su link URL aqui">Widgets blogger</a>
<ul>
<li><a href="Su link URL aqui">Blogs</a></li>
<li><a href="Su link URL aqui">Blogger</a></li>
<li><a href="Su link URL aqui">Menus</a></li>
<li><a href="Su link URL aqui">Slideshow</a></li>
<li><a href="Su link URL aqui">Comunidad</a></li>
</ul></li>
<li><a class="dir" href="Su link URL aqui">Contacto</a>
<ul>
<li><a href="Su link URL aqui">Google +</a></li>
<li><a href="Su link URL aqui">Facebook</a></li>
<li><a href="Su link URL aqui">Twitter</a></li>
</ul></li>
</ul>

Realiza estos cambios:

He marcado de tres diferentes colores en los cuales ustedes tendrán que hacer sus cambios pertinentes.

Borra las palabras que están marcadas de color azul donde dice Su link URL aqui y pon ahí la URL correspondiente del post que quieras mostrar en tu menú desplegable.

Existen palabras que están marcadas de color rojo, bórralas y pon ahí el nombre correspondiente de la categoría que quieras mostrar en tu menú.

Las palabras que están marcadas de color verde, tendrás que borrarlas y poner el nombre que tú quieras.

Y por último, los nombres de cada menú desplegable, cámbialas todas por los nombres o categorías que quieras mostrar en tu nuevo menú desplegable para blogger.

Eso es todo, ahora dale un clic en “Guardar” y ubica tu nuevo menú desplegable debajo de la cabecera principal de tu blog de blogger.

Fácil verdad

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

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

30 comentarios:

  1. Saludos buenas noches, saben como ponerle sombra a mi blog de blogger al rededor, para que simule profundidad ?? se los agradecería mucho.

    ResponderEliminar
  2. buenas, buen aporte, pero mi fallo comienza desde el principio no me aparece el codigo ]]> asi que no se donde meter las lineas siguientes...

    ResponderEliminar
    Respuestas
    1. hola, tu plantilla deley tiene que tener esta linea de codigo ]]> buscalo con tranquilidad.
      Saludos.

      Eliminar
  3. Hola Luis
    Me encanta este menu desplegable, lo instale en mi blog, pero me aparece el menu principal y no se despliega, me puedrias colaborar por favor. Gracias!!!.

    ResponderEliminar
    Respuestas
    1. Hola, encantado en ayudarte, enviame la direccion de tu blog para poder ver cual es el problema y asi poder darte las indicaciones.
      Saludos

      Eliminar
  4. Hola Luis
    Listo esta es la dirección de mi blog http://catworkshop-arteydecoracion.blogspot.com
    Gracias!!!

    ResponderEliminar
    Respuestas
    1. Hola, he visto tu blog, las plantillas antiguas tienen un pequeño problema al mostrar este tipo de menu, el cual necesitaria yo ingresar en el editor HTML de tu plantilla y ingresar parte del codigo en vez de ubicarlo en un widget. Si gustas te lo puedo dar haciendo
      Saludos

      Eliminar
    2. Hola Luis
      Gracias nuevamente por tu colaboración, pero ya pude solucionar el inconveniente, si deseas puedes darte otra pasada por mi blog y me cuentas como te parece el menú.
      Un abrazo!!!!!

      Eliminar
    3. hola, yo tengo ese mismo problema me podrias ayudar

      Eliminar
    4. hola, yo tengo ese mismo problema, no me despliega, me podrias ayudar??? te lo agradecere

      Eliminar
  5. Sumamente útil, me ha servidor para desarrollar demarelectromedicina.blogspot.com. Los colores los pude cambiar utilizando el HTML Color Picker (http://www.w3schools.com/tags/ref_colorpicker.asp).

    __
    Matias Colli
    Perito Judicial en Informática
    M.N. A-128 COPITEC

    ResponderEliminar
  6. Hola buen dia como estan ? Mi nombre es romer carrasco le escribo ya que soy nuevo en esto de los codigos y cosas asi no entiendo mucho . Tengo 2 problema con una plantilla que descargue y no he podido solucionarlo he hecho tutoriales tanto suyos como otros y nada .
    Este el link de mi plantilla http://prueba2rc.blogspot.com/ y este es link de la plantilla demo original http://boardmag.blogspot.com/.

    1. Que mi plantilla he tratado de agregar el slider pero no me sale tal cual como en la plantilla original , me sale la imagen pequeña , o no se mueven, también salen como tipo collage pequeña pero nada como el formato original

    2. La segunda es que no me sale el submenu para la plantilla si hago los paso me crea es otro menu yo lo que quiero es nada mas agregar el menu desplagable que ya trae ese menu

    También le anexo el cogido de la plantilla https://drive.google.com/file/d/0B2Kw4BvKAqssOXhMdnZHTWlBOVk/edit?usp=sharing

    De ante mano gracias y disculpa la molestia

    ResponderEliminar
  7. Hola, me sirve tu aporte, muchas gracias. Pero quiero cambiarle el tamaño de la barra y el color de fondo ¿qué parte del código edito?

    ResponderEliminar
  8. hola hay algún codigo que permita desplegar en una sub pestaña otras subpestañas, un ejemplo: en vez de que este estatica, se desprenda de "empty" Blogger, las otras
    Ganar dinero
    Internet
    Blogs
    Soluciones
    y asi poder reducir el espacio, Espero haberme dado a entender ya que soy novato en esto, por su atencion muchas gracias

    ResponderEliminar
  9. Hola Luis, por favor necesito tu ayuda, no puedo encontrar este Codigo ]]> Ya lo he buscado en diferentes partes donde dice ''Ir al widget'' por favor necesito que me respondas y ayudes lo mas pronto posible. Gracias

    ResponderEliminar
  10. hola! estoy intentando hacer el menu siguiendo los pasos aqui indicados, pero el problema es que no se despliega, verifiqué y está todo correcto, pero aun así no se despliega, tenes idea porque puede ser?

    ResponderEliminar
  11. Hola Luis.. Gracias por esa buena explicacion tan grafica, creo que no hay tan buenos tutoriales tan entendibles como lo es el tuyo. Pero de vez en cuando surgen algunos problemitas son dificiles de solucionar sin la ayuda de un experto.
    El problema que tengo es que los submenus o subpestanas del menu horizontal se esconden debajo de mi slider. si se despliegan pero estan debajo. La pregunta es si habra que modificar alguna parte del codigo htlm para que aparezca por encima del slide?
    ayuda por favor.
    saludos

    ResponderEliminar
    Respuestas
    1. Hola, la solución a este problema sería que agregues todo el código dentro de tu plantilla y no en un widget. En vez de que insertes el último código en un widget tal como lo presente en este tutorial, tendrías que ingresar todo ese código dentro de tu plantilla en el Editor HTML, tratando de ubicar correctamente justo arriba del Slideshow, con eso se activara correctamente este Menú desplegable en tu blog de Blogger. Saludos.

      Eliminar
  12. Buenos dias, me estoy volviendo loca y necesito ayuda. He hecho varias veces lo que pone en el tutoríal y no consigo que salga el desplegable. El menú queda perfecto pero no se ve el desplegable aunque aparentemente esta debajo.
    Me podría ayudar?
    Muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola, sobre su pregunta, no ingrese el código del paso 6 en un widget, en vez de realizarlo, diríjase a plantilla, un clic en el Editor HTML, y busque el siguiente código:

      < body >

      Ingrese todo el código del paso 6 justo abajo del código que encontró y mire sus resultados, ademas si aun así no le funciona correctamente, le recomiendo me deje la dirección URL de su blog de Blogger para poder ver lo que sucede

      Saludos.

      Eliminar
  13. Gracias por responder tan pronto. No encuentro el código que me dice escrito de esa forma. Aparecen muchos body pero no escritos así.

    Le dejo la URL del blog para que pueda ver lo que le digo que me pasa.

    http://miqueridopapel.blogspot.com.es

    Si quiere también le puedo pasar el link de la plantilla para que pueda echarle un vistazo.

    Muchas gracias de antemano por su tiempo.

    ResponderEliminar
    Respuestas
    1. Hola Miqueridopepel, le he dejado un comentario con las instrucciones a seguir, por favor revise el comentario en el siguiente enlace:

      http://www.ayudadeblogger.com/p/preguntas-y-respuestas.html

      Me cuenta como le fue.

      Saludos.

      Eliminar
  14. Muchas gracias de nuevo Luis, pero tampoco tengo ese código . Lo mas parecido que tengo es esto pero he probado aquí y tampoco funciona. Cambia el menú de sitio pero tampoco se despliega .

    < expr:class='"loading" + data:blog.mobileClass'>

    Que otra cosa puedo hacer?

    Gracias de nuevo


    ResponderEliminar
    Respuestas
    1. Hola Miqueridopapel, por favor realice una copia de seguridad de su blog de Blogger y envié la plantilla a mi dirección de correo electrónico:

      ayudadeblogger@gmail.com

      Con gusto realizare todos los cambios pertinentes y le enviare la plantilla lista para que pueda utilizar el menú desplegable

      Saludos.

      Eliminar
  15. Bueno pues lo primero dar las gracias, y decir que eres de el primero que pone las cosas super claras para que los demás puedan aprender y progresar muchísimas gracias y sigue así por favor hace falta más gente como tu.

    ResponderEliminar
  16. Hola, quisiera preguntar como hacer para poner una subcategoria dentro de otra subcategoria.

    ResponderEliminar
    Respuestas
    1. Hola Errdex, con respecto a su pregunta, espero realizar un tutorial sobre su requerimiento y así usted pueda ejecutar con tranquilidad lo indicado.

      Saludos.

      Eliminar
  17. Buenas tardes.

    Tras probar muchos menús desplegables (que no me funcionaron) di con este que sí lo ha hecho. El único problema es que no soy capaz de personalizarlo, cambiarle el color, tamaño, tipo de letra, color de la pestaña al pasar el cursor... etc.

    ¿Podrías ayudarme con ello?

    Un saludo y gracias!!

    ResponderEliminar
    Respuestas
    1. Hola Esther, sobre su pregunta, puede cambiar de color donde dice:

      ul.dropdown li {
          padding: 3px 12px;
          background-color: #000;
          color: #fff;
      }


      Saludos

      Eliminar