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)
- 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.
nicee
ResponderEliminarBuen contenido amigo un saludo :)
ResponderEliminarGracias... Saludos
Eliminar