Nombre del Enlace

Menu Ampliable para Blogger

En este tutorial veremos como crear un menú ampliable para blogger. Es menu tiene la capacidad ampliarse y tener un poco de opacidad. Así cuando el usuario pasa el mouse por el botón este se ensancha y aumente su opacidad. Antes de comenzar veremos una demostración:

Demostración

Comencemos:

• Paso 1: Vamos a Blogger>>Plantilla>> Edición HTML>>
• Paso 2: Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

• Paso 3: Justo por encima de ]]></b:skin> pegamos el siguiente código CSS  

#menu-css li { display: inline; list-style: none; } #menu-css li a { /* Border Radius */ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /* Border Shadow */ -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.6); -moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.6); box-shadow: 1px 2px 2px rgba(0,0,0,0.6); /* Animation (Webkit, Gecko & Mozilla) */ -webkit-transition-duration: 0.20s; -webkit-transition-timing-function: ease-out; -moz-transition-duration: 0.20s; -moz-transition-timing-function: ease-out; color: #ffffff; background: rgba(0,0,0,0.2); display: inline-block; padding: 5px 15px; outline: none; text-decoration: none; } #menu-css li a:hover { background: rgba(0,0,0,0.5); padding: 5px 25px; } #menu-css li a:active { background: rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4); -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4); box-shadow: 1px 1px 1px rgba(0,0,0,0.4); }

• Paso  4: Guardamos los cambios efectuados en nuestra plantilla

Ahora agregaremos el menu en un gadget para Ello, seguimos estos simples pasos

• Paso 1: Vamos a Blogger>>Diseño>>Agregar un nuevo gadget>>HTML/Javascript
• Paso 2: Dentro de el gadget pegamos el siguiente código HTML 

<ul id="menu-css"> <li><a href="#">Inicio</a></li> <li><a href="#">Nosotros</a></li> <li><a href="#"> Categorías</a></li> <li><a href="#"> Contactamos</a></li> </ul>

• Paso 3: Guardamos nuestro gadget.

Nota:- Solo tendrias que cambiar # y si queremos agregar otro enlace a nuestro menu agregamos <li><a href="#">Otro</a></li>