Menú horizontal para Blogger (Con descripción en cada enlace y animaciones).

Usando las transiciones CSS3 he hecho otro menú para Blogger el cual tiene un leve desplazamiento en cada enlace al situar el mouse sobre éstos, además de incluir una descripción debajo de cada título.

Puedes ver el resultado del menú observando el siguiente ejemplo:

• Enlace 1
  Lorem Ipsum
  
• Enlace 2
  Lorem Ipsum
  
• Enlace 3
  Lorem Ipsum
  
• Enlace 4
  Lorem Ipsum
  

El tutorial:

Paso 1: Añadiendo los estilos:

En "Diseño | Edición HTML" deberás buscar el siguiente código:

]]></b:skin>

Arriba de este deberás pegar el 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;
}

Paso 2: Añadiendo el menú:

Ahora deberás buscar algún lugar en donde ubicar el menú, recomiendo arriba de la siguiente sección:

<div id='content-wrapper'>

 Deberás insertar el siguiente código en la sección deseada:

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

 Previsualiza los cambios y si son satisfactorios guardas la plantilla.

Importante: Para añadir otro enlace basta con insertar el siguiente código debajo del último </li>:

<li id="enlace-5"><a href="#"><span>Enlace 5</span><br>Descripción 5</br></a></li>

Recuerda que si haz añadido otros enlaces es necesario modificar el número del ID ya que habrán errores y la plantilla no se guardará.

Si quieres personalizar los enlaces de manera individual puedes hacerlo editando los siguientes ID's:

• #enlace-1
• #enlace-2
• #enlace-3
• #enlace-4

Recuerda que al modificar el color de manera individual al pasar el cursor tienes que hacerlo con la pseudo clase ":hover".

Ejemplo:

#enlace-1:hover {
background:orange;
}

En el ejemplo anterior se modificará el color del primer enlace SÓLO al pasar el cursor sobre el enlace, deberás hacer lo mismo con cada ID para personalizar cada elemento de manera individual.