Explicación del menupeque
En esta segunda etapa quisimos incorporar algo nuestro, algo que lleve nuestra marca y fue así que creamos el menupeque; pensado especialmente para la plantilla "blogger ultra súper minimizado" cuyo ancho, recuerden bien, es de 800 pixeles…
#menupeque ul li {
float:left;
font-weight:bold;
margin-right:3px;
padding-left:3px;
}
ul li, ol li {
list-style-type:none;
list-style-position:inside;
list-style-image:none;
}
#menupeque ul li a {
text-decoration:none;
text-align:center;
background: #999 repeat scroll 0 0;
color:#111;
display:block;
-moz-border-radius: 10px 10px 10px 10px; border-color: #333; border-style: solid; border-width: 2px 5px;
height:45px;
line-height:45px;
}
#menupeque ul li a:hover {
color:#FFF;
background: #000 repeat scroll 0 0;
}
<div id="menupeque">
<ul>
<li><a href="url del enlace">❥ ENLACE 1 </a></li>
<li><a href="url del enlace">❥ ENLACE 2 </a></li>
<li><a href="url del enlace">❥ ENLACE 3 </a></li>
<li><a href="url del enlace">❥ ENLACE 4 </a></li>
<li><a href="url del enlace">❥ ENLACE 5 </a></li>
</ul>
</div>
Vamos a Edición de HTML y colocamos el código html antes de: ]]></b:skin>
#menupeque ul li {
float:left;
font-weight:bold;
margin-right:3px;
padding-left:3px;
}
ul li, ol li {
list-style-type:none;
list-style-position:inside;
list-style-image:none;
}
#menupeque ul li a {
text-decoration:none;
text-align:center;
background: #999 repeat scroll 0 0;
color:#111;
display:block;
-moz-border-radius: 10px 10px 10px 10px; border-color: #333; border-style: solid; border-width: 2px 5px;
height:45px;
line-height:45px;
}
#menupeque ul li a:hover {
color:#FFF;
background: #000 repeat scroll 0 0;
}
Luego vamos a diseño y añadimos el gadget en el lugar que queremos se vea
<div id="menupeque">
<ul>
<li><a href="url del enlace">❥ ENLACE 1 </a></li>
<li><a href="url del enlace">❥ ENLACE 2 </a></li>
<li><a href="url del enlace">❥ ENLACE 3 </a></li>
<li><a href="url del enlace">❥ ENLACE 4 </a></li>
<li><a href="url del enlace">❥ ENLACE 5 </a></li>
</ul>
</div>