G
gatuso
Alfa
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Enumero los pasos a seguir, para obtener un Menu vertical multicolor solo para blogger:
1.- Vamos a Blogger-> Plantilla-> Edicion HTML->
2.- Buscamos la siguiente linea (Ctrol + F)
3.- Justo por encima de
pegamos el siguiente codigo CSS.
4.- Ahora agregamos nuestro menu en un gadget
5.- entramos a Blogger-> Diseño-> Añadir un gadget -> HTML/Javascript.
6.- en nuestro gadget pegamos el siguiente código HTML->
7.-Guardamos nuestro gadget y listo.
Anexo un ejemplo de como quedaria:
1.- Vamos a Blogger-> Plantilla-> Edicion HTML->
2.- Buscamos la siguiente linea (Ctrol + F)
HTML:
]]></b:skin>3.- Justo por encima de
HTML:
]]></b:skin>
HTML:
.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;
}4.- Ahora agregamos nuestro menu en un gadget
5.- entramos a Blogger-> Diseño-> Añadir un gadget -> HTML/Javascript.
6.- en nuestro gadget pegamos el siguiente código HTML->
HTML:
<div class="menuvertical-tblogger">
<div>
<a href="http://url/">Inicio</a></div>
<div>
<a href="http://aqui ponemos nuestro enlace/">La casa del vector</a></div>
<div>
<a href="http://aqui ponemos nuestro enlace/">Cuentos en la red</a></div>
<div>
<a href="http://aqui ponemos nuestro enlace/">Dinero con tu red</a></div>
<div>
<a href="http://aqui ponemos nuestro enlace/">Hotel 400</a></div>
</div>7.-Guardamos nuestro gadget y listo.
Anexo un ejemplo de como quedaria:
Última edición: