MENÚ DESPLEGABLE PARA BLOGGER

MENÚ DESPLEGABLE PARA BLOGGER.

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. La Pagina de Kiko de Blogger.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.

Para implementarlo en vuestro Bloc solo tenéis que seguir estos pasos:

 Da un clic en “Plantilla”

 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

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.

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/AVvXsEiNbbEd7UtNW8EUrb0Q49b3uzIeNtx5kpEAbr8UB5JA56elbfz7rxZX27e0n2vSaMe3HMGWSntE6saxZvdHjgUT0dJqd_hTa7mWsB1W7mQNQcOyQWtmK_UAIT1RrqXPDsX28YXivYCFUdU/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”

Un clic en “Diseño”

Clic en “Añadir un gadget”

Busca el widget que dice “HTML-Javascript” y ábrelo

Coloca el siguiente código en el interior

<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.

Después de haber insertado el código, un clic en "Guardar"

 Data de la Publicación; 03-09-2019

 Fuente;  ayudadeblogger

 Publicado por;