Menú horizontal simple para tu blog

Aquí os presentamos un menú muy sencillo y útil que puedes poner en tu blog fácilmente.

Puedes ver un ejemplo del menú en funcionamiento aquí. 

Sólamente añadimos un nuevo Elemento HTML ↑ encima de la zona de entradas (preferiblemente) y en él ponemos el siguiente código:

<div id="menuarriba">
    <ul id="navi1">
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Acerca de</a></li>
    <li><a href="#">Enlazar</a></li>
    <li><a href="#">Contacto</a></li>
</ul>
</div>

<style type="text/css">
#navi1 {
    margin:0px;
    padding:0px;

}
#navi1 li {
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
background:url(http://i825.photobucket.com/albums/zz180/latrucoteca/Degradadomini-1.png);
        color:#000000;
        margin:5px;
        padding:3px;
        width: 100px;
        border:1px solid black;
        text-align:center;
        list-style:none;
        font-family: Segoe UI, Arial;
        font-size: 14px;
       float:left;
    }
#navi1 li:hover {
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
background:url(http://i825.photobucket.com/albums/zz180/latrucoteca/Degradadomini-1.png);
        color:#000000;
        border:1px solid black;
}
#navi1 li a:hover {
        color: #ffffff;
        font-style: Italic;
        text-decoration: none;
}
#navi1 a {
        color: #ffffff;
        font-weight: bold;
}
</style>

Tras Guardar, debes modificar la siguiente parte:

    <li><a href="#">Inicio</a></li>
    <li><a href="#">Acerca de</a></li>
    <li><a href="#">Enlazar</a></li>
    <li><a href="#">Contacto</a></li>

Las palabras en rojo, por el título que desees que salga, y el asterisco, por la URL de la página o sección a la que quieres enlazar.
También puedes agregar una línea más después de los que ya hay presentes, es decir, un botón más en el menú:

<li><a href="#">Otro título más</a></li>

Y así ya podrás disponer de un sencillo pero atractivo menú para organizar más a fondo tu blog.

Notas:

· Para cambiar el color del menú:
Quizás te hayas dado cuenta de que existe una pequeña imagen que sirve como fondo del menú: http://i825.photobucket.com/albums/zz180/latrucoteca/Degradadomini-1.png
Si quieres cambiar el color deberás, por lo tanto, utilizar otro degradado o imagen que desees, o modificarla con algún programa de edición gráfica como Photoshop (Ajustes>Tono/Saturación), Gimp, alguna utilidad online, o incluso con la misma Galería Fotográfica disponible para Windows.

· En Mozilla Firefox, Safari y Google Chrome, el menú tiene la propiedad de estar redondeado, pero en Internet Explorer, desafortunadamente no, aunque no queda menos elegante.
· Si algún título demasiado largo no encaja bien, prueba a eliminar width: 100px; , o a poner un numero mayor.
· En caso de problemas, puedes dejarnos un comentario y te responderemos lo antes posible :)

Menú creado por La Trucoteca de Blogs