menú azul blogger,rosavecina.net

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:

<div class='menu'>
<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.