Mil Trucos Blogger

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

Relacionados...

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

2 Comentarios

  1. Marzo 7, 2016    

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

    Gracias!!

    • Juvinao Juvinao
      Marzo 18, 2016    

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

      Saludos

Deja un comentario

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

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo