Plantilla –> Editar HTML.
En la plantilla del blog buscaremos el código ]]></b:skin> y antes de él pegaremos lo siguiente:
/* Menu principal -
----------------------------------------------- */
.menu{width:1014px;background:#01A9DB;border:4px solid #446666;overflow:hidden;border-radius:10px;}
.menu ul{float:left;padding:3px;}
.menu li{display:inline;font-weight:bold;float:left;}
.menu li ul{display:none;}
.menu li a{color:#fff;padding:5px 10px 5px 10px;display:block;margin-right:4px;float:left;border-radius:5px;text-decoration:none;}
.menu li a:hover{background:#FFFFFF;color:#000000;text-decoration:none;}
En el código anterior podemos modificar algunos detalles sencillos del menú para que lo podáis adaptar cada uno a vuestro blog:
Anchura del menú
.menu{width:1014px;background:#99BB55;border:4px solid #446666;overflow:hidden;border-radius:10px;}
Color de fondo del menú
.menu{width:1014px;background:#01A9DB;border:4px solid #01A9DB;overflow:hidden;border-radius:10px;}
Tipo de borde, por este orden, ancho – tipo – color
.menu{width:1014px;background:#99BB55;border:4px solid #446666;overflow:hidden;border-radius:10px;}
Radio de las esquinas exteriores del menú
.menu{width:1014px;background:#99BB55;border:4px solid #446666;overflow:hidden;border-radius:10px;}
Color del texto del menú
.menu li a{color:#fff;padding:5px 10px 5px 10px;display:block;margin-right:4px;float:left;border-radius:5px;text-decoration:none;}
Radio de las esquinas del cuadro que aparecerá al pasar por encima el puntero de ratón
.menu li a{color:#fff;padding:5px 10px 5px 10px;display:block;margin-right:4px;float:left;border-radius:5px;text-decoration:none;}
Color del cuadro que aparecerá al pasar por encima el puntero de ratón
.menu li a:hover{background:#FFFFFF;color:#fff;text-decoration:none;}
Una vez hayamos dejado el código CSS a nuestro gusto, tendremos que añadir un gadget de tipo HTML/Javascript en la categoría Diseño de la administración de nuestro blog.

Como código de ese gadget pegaremos lo siguiente:
<ul>
<li><a href='http://rosavecina.net'>Inicio</a></li>
<li><a href='direccion pagina'>pagina</a></li>
<li><a href='direccion de pagina'>radios</a></li>
<li><a href='direccion pagina'>Photoshop</a></li>
<li><a href='direccion pagina'>Facebook</a></li>
<li><a href='direccion pagina'>estrenos cines</a></li>
<li><a href='direccion pagina'>tv</a></li>
<li><a href='direccion pagina'>png</a></li>
<li><a href='direccion pagina'>plantillas</a></li>
<li><a href='direccion pagina'>paginas amigas</a></li>
</ul>
</div>
En el código anterior tendréis que modificar tanto el enlace como el texto a mostrar dado que es el menú de este blog.
Hecho esto sólo necesitaréis guardar los cambios y comprobar el correcto funcionamiento de este menú CSS en Blogger.
0 comentarios:
Publicar un comentario
muchas gracias por comentar ;)