Son muchas las opciones de menús que he publicado en el blog, pero nunca está de más publicar otra opción, que por cierto es muy buena, puesto que viene el menú con un elegante efecto de animación logrado con CSS, además de una breve descripción sobre el enlace.

Menú para Blogger con animación CSS y descripción …

Para agregar este menú, primero se debe añadir el CSS en el blog y para ello ve a Plantilla, Editar HTML y justo arriba de la etiqueta ]]></b:skin> añade lo siguiente:

#menu-soft {
width:100%;
padding:0;
color:#d9d9d9;
font-family: Century Gothic;
overflow:hidden;
background:#222;
}
#menu-soft ul {
width:940px;
margin:0auto;
}
#menu-soft a {
color:#d9d9d9;
font-weight:normal;
}

#menu-soft ul {
list-style:none;
display:block;
margin:0;
padding:0;
}

#menu-soft li {
float:left;
padding:10px;
display:block;
width:100px;
border-left:1px solid #2d2d2d;
/*Duración de transiciones*/
-moz-transition: 0.7s;
-webkit-transition: 0.7s;
-o-transition:0.7s;
transition: 0.7s;
}

#menu-soft li:hover {
padding-left:50px;
cursor:pointer;
background:#1bb1bb;
}
#menu-soft li:hover a {
color:#fff;
text-shadow:1px 1px #222, 2px 2px #222; 3px 3px #222; 4px 4px #222;
}

#menu-soft li span {
font-size:24px;
}

Ahora en Diseño, Añadir Gadget, HTML/JavaScript (preferiblemente debajo de la cabecera del blog) añade lo siguiente:

<div id="menu-soft">
<ul>
<li id="enlace-1"><a href="URL 1"><span>Enlace 1</span><br>Descripción 1</br></a></li>
<li id="enlace-2"><a href="URL 2"><span>Enlace 2</span><br>Descripción 2</br></a></li>
<li id="enlace-3"><a href="URL 3"><span>Enlace 3</span><br>Descripción 3</br></a></li>
<li id="enlace-4"><a href="URL 4"><span>Enlace 4</span><br>Descripción 4</br></a></li>
</ul>
</div>

Por último solo queda reemplazar lo resaltado en color azul por lo que se indica en cada caso y guardar los cambios.

No olvides compartir esta entrada en tus redes sociales..