Home Menu desplegable Menú desplegable para blogger nuevo estilo

Menú desplegable para blogger nuevo estilo

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDqJqOUB4sG6yKEepb6bzB_nhFqY7ILORIu1YgzA1rz56ppGMqcQj-RZ-9eU-AyaUCWutzJQtWLyUXRh-lUtBoA9uTNu97fnpgA9teGhhOqc_PLOHBHWCy30NbMvbQdom8ghyphenhyphenMq5G2YkY/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

TAGS:


Share:

Related post

Comentarios

30 comentarios: