Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
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:

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>
- - 2 Comentarios
Tag

Comentarios (2)

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar