Hola de nou a tots i a totes. He trobat una nova forma de fer un menu horitzontal molt i molt més fàcil que canviant manualment la plantilla. Com avança la informàtica! jejeje
Aquí us presento un menú molt senzill i útil que podeu posar en el vostre blog fàcilment.
Les paraules en vervell pel tìtol que vulguis i l' asterisc per la URL de la pàgina o la secció que vols enllaçar.
També pots afegir una línia més de les presents, és a dir, un botó més en el menú:
..................................................
<li><a href="#">Un altre títol</a></li>
..................................................
I així ja podreu disposar d'un senzill però atractiu menú per organitzar més a fons el vostre blog.
Notes:
· En Mozilla Firefox, Safari y Google Chrome, el menú té la propietat d'estar un pel rodonet, però en Internet Explorer, desafortunadament no, tot i que no queda menys elegant.
· Si un títol massa llarg no encaixa be, proba a eliminar width: 100px; , o a posar un nombre més gran.
Aquí us presento un menú molt senzill i útil que podeu posar en el vostre blog fàcilment.
Només cal afegir un nou Elemento HTML damunt de la zona d'entrades (preferiblement) i en ell posem el següent codi:
..................................................
..................................................
<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>
<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>
..................................................
Un cop li donis a Guardar modifica la següent part:
..................................................
<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>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Enlazar</a></li>
<li><a href="#">Contacto</a></li>
..................................................
Les paraules en vervell pel tìtol que vulguis i l' asterisc per la URL de la pàgina o la secció que vols enllaçar.
També pots afegir una línia més de les presents, és a dir, un botó més en el menú:
..................................................
<li><a href="#">Un altre títol</a></li>
..................................................
I així ja podreu disposar d'un senzill però atractiu menú per organitzar més a fons el vostre blog.
Notes:
· En Mozilla Firefox, Safari y Google Chrome, el menú té la propietat d'estar un pel rodonet, però en Internet Explorer, desafortunadament no, tot i que no queda menys elegant.
· Si un títol massa llarg no encaixa be, proba a eliminar width: 100px; , o a posar un nombre més gran.
