Un bonito menú, que podemos instalar en nuestro blog fácilmente, sigue los pasos y podrás conseguir tu bonito menú...
(1) Buscaremos la etiqueta <head> y justo debajo le pegaremos este código:
<style type='text/css'>
/*Pegar después de HEAD */
.invertedshiftdown2{
padding: 0;
width: 100%;
border-top: 5px solid #8B0000; /*ancho, tipo y color de linea que va arriba*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
.invertedshiftdown2 ul{
margin:0;
margin-left: 40px;
padding: 0;
list-style: none;
}
.invertedshiftdown2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;/*transformas las letras en mayúscula, si no te gusta pone none*/
}
.invertedshiftdown2 a{
float: left;
display: block;
font: bold 12px Arial;/*tipo de letra*/
color: #8B0000;
text-decoration: none;
margin: 0 1px 0 0;
padding: 5px 10px 5px 10px;
background-color: #FFD401; /*color del menú antes de seleccionar*/
border-bottom: 8px solid white;
}
.invertedshiftdown2 a:hover{
background-color: #8B0000; /*color del menu al seleccionar*/
padding-top: 10px;
padding-bottom: 0; /*podrás agrandar la selección */
border-bottom-color: #8B0000; /*color del menú al seleccionar, parte de abajo*/
color: #FFFF99;/*color de letra al seleccionar*/
}
.invertedshiftdown2 .current a{
background-color: #8B0000; /*color fijo de inicio*/
padding-top: 10px;
padding-bottom: 0;
border-bottom-color: #8B0000; /*color fijo de inicio, parte de abajo*/
color: #FFFF99;/*esto es el color fijo de letra de INICIO*/
}
</style>
Date cuenta que dentro del código se explica cómo cambiar los colores, añadir enlaces...
(2) Ahora, guardamos cambios.
(3) Pegaremos este código:
<div class="invertedshiftdown2">
<ul>
<li class="current"><a href="Aqui la direccion" title="Inicio">El inicio</a></li>
<li><a href="Aqui la URL" title="TITULO">TITULO</a></li>
<li><a href="Aqui la URL" title="TITULO">TITULO</a></li>
<li><a href="Aqui la URL" title="TITULO">TITULO</a></li>
<li><a href="Aqui la URL" title="TITULO">TITULO</a></li>
<li><a href="Aqui la URL" title="TITULO">TITULO</a></li>
<li><a href="tuemail@gmail.com" title="gmail">Contacto</a></li>
</ul></div>
Donde pone "Aquí la URL" introduciremos la dirección web/blog que queramos.
Donde pone "TITULO" introduciremos el titulo que queramos, por ejemplo, si ponemos blogger.com el titulo seria blogger.
Donde pone "TITULO" introduciremos el mismo titulo que antes.
En donde pone "tuemail@gmail.com" introduciremos nuestro email, Donde pone gmail, podemos cambiarlo si nuestro corrreo es hotmail, borrariamos gmail e introduciriamos hotmail.
Podemos cambiar lo de "Contacto" por algo más personal, como... ¡Habla con migo!