COMO AGREGAR UN MENÚ DE NAVEGACIÓN DESPLEGABLE EN BLOGGER

Les traigo un post acerca de como implementar un Menu Desplegable en tu blog de blogger. Este menú se puede personalizar de modo que usted puede personalizar fácilmente  y crear un estilo propio para que se adapte a tu blog, para personalizarlo utiliza el editor HTML donde se puede ver la vista previa en vivo de el menú cuando se aplican los cambios, también la estructura HTML de este menú .es malditamente fácil y sencillo :) jeje, sin necesidad de añadir ningun class id y puede agregar sus enlaces con el uso normal, con etiketas ul y li .

Ver Demo Con UN editor HTML

Nota - Pegar todo el siguiente código HTML en el Editor y  aparecerá la vista previa de manera instantanea, si desea personalizar este menú entonces tendrás que cambiar los valores de CSS. una vez terminado esta listo para añadirlo a BLOGGER

Cómo Agregar el Menú de navegacion Desplegable a Blogger

1. Vaya a Escritorio de Blogger> Diseño
2. Haga clic en Añadir un gadget
3. Seleccione HTML / JavaScript
4. Pegue el código a continuación en el mismo,

<style>
/*======= Menu de navegacion desplegable por UNIVERSO BLOGGER ========= */
.ddsmoothmenu-v ul {
    margin: 0;
    padding: 0;
    width: 250px;
 /* Main Menu Item widths */
    list-style-type: none;
    font: bold 12px Verdana;
    border-bottom: 0px solid #ccc;
}

.ddsmoothmenu-v ul li {
    position: relative;
}

.downarrowclass {
    position: absolute;
    top: 12px;
    right: 7px;
}

.rightarrowclass {
    position: absolute;
    top: 10px;
    right: 5px;
}
    /* Top level menu links style */
.ddsmoothmenu-v ul li a {
    display: block;
    overflow: auto;
        /*force hasLayout in IE7 */
    height: 32px;
    color: white;
    text-decoration: none;
    padding: 5px 5px 5px 25px;
    border-bottom: 0px solid #778;
    border-right: 0px solid #778;
}

.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active {
    color: white;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWqzb0pLhCt31U-TUXEPLUVuaE5hzUDg_yFL2RJyc_B7OVwOokjBDsTVULudM8t9S6GVrd2dtWKKm9oKHe3IfVnqEVmAJR5BDpAYmIRLDAWizlHTcA1GeSGQUPhlGlXAQy-T4eva60UcM/s1600/tab_bg.gif);
    height: 22px;
    background-repeat: repeat-x;
    background-position: left center;
    margin-bottom: 1px;
}

.ddsmoothmenu-v ul li a.selected {
        /*CSS class that's dynamically added to the currently active menu items' LI A element*/
    color: white;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-wgUQn049Wh1ncnRujjOG65IGkzPLEb41srB7Z3CS6GdtjYToC96ZMCkd2uTy-SbTqH981RffJBLbAwkBG8tvPXIx326lwedkzTpUX8sxde4QeYfMpEMl0HXK78NaCR2Rp5TbD0sqVLQ/s1600/tabhover_bg.gif);
    height: 22px;
    background-repeat: repeat-x;
    background-position: left center;
}

.ddsmoothmenu-v ul li a:hover {
    color: white;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-wgUQn049Wh1ncnRujjOG65IGkzPLEb41srB7Z3CS6GdtjYToC96ZMCkd2uTy-SbTqH981RffJBLbAwkBG8tvPXIx326lwedkzTpUX8sxde4QeYfMpEMl0HXK78NaCR2Rp5TbD0sqVLQ/s1600/tabhover_bg.gif);
    height: 22px;
    background-repeat: repeat-x;
    background-position: left center;
}
    /*Sub level menu items */
.ddsmoothmenu-v ul li ul {
    position: absolute;
    width: 170px;
        /*Sub Menu Items width */
    height: 22px;
    top: 0;
    font-weight: normal;
    visibility: hidden;
}
    /* Holly Hack for IE \*/
* html .ddsmoothmenu-v ul li {
    float: left;
    height: 1%;
}

* html .ddsmoothmenu-v ul li a {
    height: 1%;
}
/*======= Menu de navegacion desplegable por UNIVERSO BLOGGER ========= */
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://code.helperblogger.com/hb-smooth-menu.js"></script>
<script type="text/javascript">
    })
</script>
<script type="text/javascript">
    ddsmoothmenu.init({

        mainmenuid: "smoothmenu2",
        //Menu DIV id
        orientation: 'v',
        //Horizontal or vertical menu: Set to "h" or "v"
        classname: 'ddsmoothmenu-v',
        //class added to menu's outer DIV

        //customtheme: ["#804000", "#482400"],
        contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
    })
</script>
<div id="smoothmenu2" class="ddsmoothmenu-v">
     <ul>
        <li>
            <a href="http://trucosblogger-es.blogspot.com/">Home</a>
        </li>
        <li>
            <a href="#">Folder 0</a>
            <ul>
                <li>
                    <a href="#">Sub Item 1.1</a>
                </li>
                <li>
                    <a href="#">Sub Item 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Folder 1</a>
            <ul>
                <li>
                    <a href="#">Sub Item 1.1</a>
                </li>
                <li>
                    <a href="#">Sub Item 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Item 3</a>
        </li>
        <li>
            <a href="#">Folder 2</a>
            <ul>
                <li>
                    <a href="#">Sub Item 2.1</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="http://trucosblogger-es.blogspot.com/">CREAR ESTE</a>
        </li>
    </ul>
    <br style="clear: left" />
</div>

• Para cambiar el ancho simplemente modifique el valor  ancho: 250px;
• Si ya ha añadido un plugin de jQuery para su blog, quitar el código resaltado en color verde tenue.
• Reemplace # con tus propios enlaces
• Reemplace subtema 1,  subtema 2 ..... y en el texto que desea que aparezca en el menú.

Para obtener una personalizacion mas a su estilo utiliza este  editor HTML para que pueda ver una vista previa de los cambios. Espero que te haya gustado este menu. Si existen problemas con el codigo al insertarlo en tu blog déjame un comentario :)