Menú multicolor para Blogger

Este sencillo menú horizontal basado sólamente en CSS y algunos patrones CSS3 permite añadir pestañas de distintos colores. Es bastante fácil de configurar y además es muy llamativo.

Vista previa del menú:

• Naranjo
• Celeste
• Verde
• Rojo
• Gris
• Azul

¿Cómo añadirlo a Blogger?

Paso 1: Añadiendo la sección:

En ''Diseño | Edición HTML'' marcaremos ''Expandir plantillas de artilugios''.

Buscaremos la siguiente sección:

<div id='content-wrapper'>

Arriba de esta pegaremos el siguiente código:

<div id='multicolorido'><div id='menuayuda-blogger'>
<ul>
<li class='naranjo'><a href='ENLACE1'>Título 1</a></li>
<li class='celeste'><a href='ENLACE2'>Título 2</a></li>
<li class='verde'><a href='ENLACE3'>Título 3</a></li>
<li class='rojo'><a href='ENLACE4'>Título 4</a></li>
<li class='gris'><a href='ENLACE5'>Título 5</a></li>
<li class='azul'><a href='ENLACE6'>Título 6</a></li>
</ul>
</div></div>

Paso 2: Añadiendo los estilos:

Ahora buscaremos la siguiente sección:

]]></b:skin>

Arriba de esta pegaremos el siguiente fragmento:

#multicolorido{
margin-left:auto;
margin-right:auto;
width: 900px;
}

#menuayuda-blogger {
margin:0px auto;
height:33px;
}

#menuayuda-blogger ul {
margin:0;
padding:0;
padding-top:12px;
list-style:none;
}

#menuayuda-blogger li {
box-shadow: 1px 1px 1px 1px #7a7a7a;
border-radius: 0 0 15px 15px;
float:left;
margin:0 !important;
padding:0 1px 0 0 !important;
font-family: 'Verdana', arial, serif;
list-style:none;
}

#menuayuda-blogger a {
font-size: 12px;
font-family: 'Verdana', arial, serif;
float:left;
text-decoration:none;
color:#fff;
margin:0;
padding:12px 10px;
}

#menuayuda-blogger a:hover {
text-decoration:none;
color:#fff;
}

#menuayuda-blogger ul li.naranjo{ /*Naranjo*/
background: #f59c1b;
}

#menuayuda-blogger ul li.naranjo:hover{
height:50px;
}

#menuayuda-blogger ul li.celeste{ /*Celeste*/
background: #00addf;
}

#menuayuda-blogger ul li.celeste:hover{
height:50px;
}

#menuayuda-blogger ul li.verde{ /*Verde*/
background: #a2c64e;
}

#menuayuda-blogger ul li.verde:hover{
height:50px;
}

#menuayuda-blogger ul li.rojo{ /*ROJO*/
background: #e02309;
}
#menuayuda-blogger ul li.rojo:hover{
height:50px;
}
#menuayuda-blogger ul li.gris{ /*GRIS*/
background: #4d4c4c;
}

#menuayuda-blogger ul li.gris:hover{
height:50px;
}

#menuayuda-blogger ul li.azul{ /*AZUL*/
background: #0071a9;
}

#menuayuda-blogger ul li.azul:hover{
background: #0071a9;
height:50px;
}

Guardas los cambios y listo.

Importante:

• Para crear un nuevo enlace, deberás pegar la siguiente línea antes de </ul>:

<li class='color'><a href='ENLACE'>Título</a></li>

• Si deseas añadir un color extra, deberás crear nuevos atributos:

#menuayuda-blogger ul li.color{
background: #COLOR;
}
#menuayuda-blogger ul li.color:hover{
height:50px;
}