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

Categorías: Trucos Blogger

2 comentarios

Luis Reyes · marzo 7, 2016 a las 3:48 pm

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

Gracias!!

    Juvinao · marzo 18, 2016 a las 8:38 pm

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

    Saludos

Responder a Luis Reyes Cancelar la respuesta

Marcador de posición del avatar

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