Ya hemos visto muchos tutorial de como crear menús, en su mayoría horizontales. En este tutorial veremos como crear un menú vertical multicolor, para aquellos que quieran agregarlo en un gadget lateral y
ahorrar espacio

Antes de comenzar veremos una demostracion:

Comencemos:

  • Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>>
  • Paso 2: Buscamos la siguiente linea (Ctrol + F)
]]></b:skin>
  • Paso 3: Justo por encima de ]]></b:skin> pegamos el siguiente codigo CSS.
 .menuvertical-tblogger div {
  background: #111;
  width: 6.6em;
  margin: 1em auto;
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  border-radius: .5em;
  color: #fff;
  text-align: center;
  padding: .4em;
  font: bold 1.8em 'Open Sans', sans-serif;
  -webkit-box-shadow: 0 1px 3px 7px #aaa;
  -moz-box-shadow: 0 1px 3px 7px #aaa;
  box-shadow: 0 1px 3px 7px #aaa;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  -ms-transition: .35s ease-in-out;
  -o-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
  /*cursor pointer should be nice.*/
  cursor: pointer;
}
/*It's time for hover state of all div(s) :p*/
.menuvertical-tblogger div:nth-child(n):hover {
  -webkit-border-radius: .7em;
  -moz-border-radius: .7em;
  border-radius: .7em;
  -webkit-box-shadow: 0 1px 3px 5px #0f5;
  -moz-box-shadow: 0 1px 3px 5px #0f5;
  box-shadow: 0 1px 3px 5px #0f5;
  color: #0f5;
}
.menuvertical-tblogger div:nth-child(2):hover
{
   box-shadow: 0 1px 3px 5px #f33;
  -moz-box-shadow: 0 1px 3px 5px #f33;
  -webkit-box-shadow: 0 1px 3px 5px #f33;
  color: #f33; 
}
.menuvertical-tblogger div:nth-child(3):hover
{
   box-shadow: 0 1px 3px 5px violet;
  -moz-box-shadow: 0 1px 3px 5px violet;
  -webkit-box-shadow: 0 1px 3px 5px violet;
  color: violet; 
}
.demo div:nth-child(4):hover
{
   box-shadow: 0 1px 3px 5px skyblue;
  -moz-box-shadow: 0 1px 3px 5px skyblue;
  -webkit-box-shadow: 0 1px 3px 5px skyblue;
  color: skyblue; 
}
.menuvertical-tblogger div:nth-child(5):hover
{
   box-shadow: 0 1px 3px 5px orange;
  -moz-box-shadow: 0 1px 3px 5px orange;
  -webkit-box-shadow: 0 1px 3px 5px orange;
  color: orange; 
}
Ahora agregaremos nuestro menu en un gadget para eso seguimos estos pasos
  • Paso 1: Vamos a Blogger>> Diseño>> Añadir un gadget >> HTML/Javascript.
  • Paso 2: Dentro de nuestro gadget pegamos el siguiente código HTML>>
<div class="menuvertical-tblogger">
<div>
<a href="http://url/">Ver Demo</a></div>
<div>
<a href="http://url/">Ver Demo</a></div>
<div>
<a href="http://url/">Ver Demo</a></div>
<div>
<a href="http://url/">Ver Demo</a></div>
<div>
<a href="http://url/">Ver Demo</a></div>
</div>
  • Paso 3: Guardamos nuestro gadget y listo.

Solo debes de agregar la URL de tu enlace y ver demo por tu titulo del menu



- - 3 Comentarios
Tag

Comentarios (3)

:))
:((
: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