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

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado
1

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 …

menu-con-animacion-y-descripcion-blogger

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..

0
Shares
Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado
1

2 comentarios sobre “Menú para Blogger con animación CSS y descripción

  • el marzo 7, 2016 a las 3:48 pm
    Permalink

    Holaaa, tendrán un menú para versiones móviles que me puedan recomendar??

    Gracias!!

    Respuesta
    • el marzo 18, 2016 a las 8:38 pm
      Permalink

      Hola Luis, si hay varios menús responsives que aún no he publicado, en cuando pueda los publico.

      Saludos

      Respuesta

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *