Una vez que haya visto la demostracion de este Menu Horizontal Personalizado Para Barra Del Lado de tu blog que esta debajo de este texto , espero que no hay nada más que explicar exactamente lo que se va a añadir a su blog, después de implementar este truco.
El proceso es muy fácil y el widget general es completamente editable, de modo que usted puede ajustar aún más.Pero recuerde que esto se ha creado y registrado por MENÚS labradas.
Basta con acceder a Blogger, vaya a "Diseño" y "Añadir un gadget" de tipo HTML / JavaScript. Luego, en el contenido, pega este código que esta despues de esta demostracion:
<center>
<div id="menu">
<ul>
<li><a class="current" href="http://ciudadblogger.info/">home</a></li>
<li><a href="http://about.com/">about us</a></li>
<li><a href="http://google.com/">Google</a></li>
<li><a href="http://wikipedia.com/">Wikipedia</a></li>
<li><a href="mailto:tytrrttttttt">contact us</a></li>
</ul>
</div>
</center>
<style>
/* --------------------------
AUTHOR : STYLED MENUS
URL : http://www.styledmenus.com
Copyrights by STYLED MENUS
Widget From http://Ciudadblogger.net
----------------------------*/
*{
margin:0;
padding:0;
}
#menu{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfACAO6xy4roCoXO1R2oFGZ6mrKlNDsB3sVqhpAYfBbz_qVDJeBSRU_z-gcAhpYmbQfjeyr10fkd080iU7r-yWQz-gKLeUuzQFON8nPn7w7Mu2zRMd9sX22vlrAZJJTFLKb181UVBr_FU/s1600/menu_026_bg.jpg) no-repeat;
width:172px;
height:191px;
padding:15px;
}
#menu ul{
list-style:none;
padding:0 0 0 8px;
}
#menu li{
list-style:none;
display:block;
padding:10px 0;
}
#menu li a{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJuEtIkXNmP2Y-WD8NuJ_lk86jwL9jZA5_MpGWpbEvSBsblC97P2LdM3usVoCIj5rHVGkNQpzaDG_M59KJLz9t2iVgMW-wvO-Iq2vYXXToKXSeCBaLkOWc75O0OiNCOMjKx0eBH5enRXw/s1600/menu_026_b.gif) no-repeat left center;
color:#ffe991;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
line-height:1.2em;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMYFWtQKLSaH-FdM0yo503otgyAtdoglyBJUdNT7ggm500DWRHA1M21MJ9IMKM5o_gS0oQE0V40eWwyAVvvw3cHvxg6M14fhIsfMkj1UUEM2B_TlpUTYJLX5_uIv2ihY2oP3QoPnPr0EY/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
#menu li .current{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMYFWtQKLSaH-FdM0yo503otgyAtdoglyBJUdNT7ggm500DWRHA1M21MJ9IMKM5o_gS0oQE0V40eWwyAVvvw3cHvxg6M14fhIsfMkj1UUEM2B_TlpUTYJLX5_uIv2ihY2oP3QoPnPr0EY/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a.current, #menu li a:hover.current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMYFWtQKLSaH-FdM0yo503otgyAtdoglyBJUdNT7ggm500DWRHA1M21MJ9IMKM5o_gS0oQE0V40eWwyAVvvw3cHvxg6M14fhIsfMkj1UUEM2B_TlpUTYJLX5_uIv2ihY2oP3QoPnPr0EY/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
</style>
El código de color rojo, es lo que tiene que editar. Y las líneas de código en color azul son las imágenes que se utilizan en este artilugio, para que pueda utilizar alguna otra imagen de fondo si deseas (de dimensiones similares) en el caso de la imagen de arriba no te guste.
0 comentarios:
Publicar un comentario