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

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:



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.
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Botones para subir y bajar en Blogger # - Botones para subir y bajar en Blogger
Insertar una página externa en una entrada en Blogger # - Insertar una página externa en una entrada en Blogger
Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger