Delicious LinkedIn Facebook Twitter RSS Feed

Menú horizontal para tu blog.

Esta es otra opción de menú,con la que podemos añadir las secciones o enlaces que queramos,es simple y muy útil,ya que podemos añadir mas botones además para quien quiera un menú de este tipo y no quiera cambiar de plantilla,ya puede conseguir este menú de este tipo sin necesidad de cambio de plantilla.

Solamente 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 los nombres del menú y añadir los enlaces donde al pulsar cada botón del menú se dirigirá("Editable lo que esta en Rojo"):
<li><a href="AÑADIR URL">Inicio</a></li>
<
li><a href="AÑADIR URL">Acerca de</a></li>
<
li><a href="AÑADIR URL">Enlazar</a></li>
<
li><a href="AÑADIR URL">Contacto</a></li>

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="AÑADIR URL">Otro título más</a></li>

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

0 comments:

Post a Comment