Tutoriales Sobre Blogger: Crear hermoso menú para Blogger

En este tutorial veremos como agregar un Hermoso menú a nuestro blogger. Este menú tiene la particularidad de dar una descripción sobre cada enlace en cual agregaremos con un efecto Rollover





Antes de Comenzar veremos una Demostración

Demostración

Comencemos:

• Paso 1: Vamos a Blogger>>Plantilla>> Edición HTML>> 
• Paso 2: Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

• Paso 3: Justo por encima de ]]></b:skin> pegamos el código CSS 

/* Menu TutorialesBlogger.blogspot.com */
#menu6 ul {
    list-style:none;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: -1px;
    line-height: 1.1em;
    float:left;
    clear:both;
    margin:20px;
    border:4px groove #ffe430;
}
#menu6 ul li{
    float:left;
}
#menu6 ul li a{
    display:block;
    text-decoration:none;
    padding:10px 10px 5px 10px;
    color:#fff;
    background-color:#ffc730;
    width:170px;
}
#menu6 ul li a span{
    display:block;
}
#menu6 ul li a span.title{
    border-bottom:2px solid #ffc730;
}
#menu6 ul li a:hover{
    background-color:#fff;
}
#menu6 ul li a:hover span.title{
    color:#ffc730;
    border-bottom:2px solid #ffe430;
}
#menu6 ul li a span.text{
    padding:0px 5px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: italic;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.4em;
    background-color:#ffc730;
    visibility:hidden;
    color:#fff;
}
#menu6 ul li a:hover span.text{
    visibility:visible;
}

• Paso 4: Guardamos los cambios efectuados en la plantilla

Ahora agregaremos el Codigo HTML en un gadget

• Paso 5: Vamos a Blogger>>Diseño>>Añadir nuevo Gadget>>HTML/Javascript
• Paso 6: Dentro del Gadget agregamos el siguiente codigo HTML

<div id="menu6">
            <ul>
                <li><a href="URL">
                        <span class="title">About</span>
                        <span class="text">Quienes Somos</span>
                    </a>
                </li>
                <li><a href="URL">
                        <span class="title">Tips</span>
                        <span class="text">Tutoriales Blogger</span>
                    </a>
                </li>
                <li><a href="URL">
                        <span class="title">Blogger</span>
                        <span class="text">Plantillas Blogger</span>
                    </a>
                </li>
                <li><a href="URL">
                        <span class="title">Map</span>
                        <span class="text">Mapa del Blog</span>
                    </a>
                </li>
             
                <li><a href="URL">
                        <span class="title">Contacto</span>
                        <span class="text">Contacta con Nosotros</span>
                    </a>
                </li>
             </ul>
        </div>

Nota:- Solo deberas cambiar URL por las URL para cada menu