Hola. Como obiamente debieron observar se ha cambiado la apariencia del blog... uno de los cambios es que se puso un menu lateral con efecto Slide a la Izquierda. Ese menu esta hecho en JQuery y CSS. de verdad me ha gustado mucho y es primera vez que me atrevo a incluir JQuery a Quenotas... pero bueno.. al grano. les traigo este hermoso menu para que lo utilizen en su blog.Lo primero que hay que hacer es incluir la librería jQuery v1.3.2 a su plantilla. No se preocupen no tienen que descargar nada.. solo déjenselo a Google xD
busca la etiqueta </head> y justo antes pega el siguiente código:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
copia el siguiente código y pégalo justo después del código que acabas de pegar antes de </head>
<script type="text/javascript">
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
</script>
Ahora le toca al CSS
busca la etiqueta ]]></b:skin> y justo antes pega el siguiente código:
/* CSS menú de Navegación Slide*/
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 10px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
display: block;
margin-left: -2px;
width: 100px;
height: 70px;
background-color:#CFCFCF;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .imagen1 a{
background-image: url(url-de-tu-imagen);
}
ul#navigation .imagen2 a {
background-image: url(url-de-tu-imagen);
}
ul#navigation .imagen3 a {
background-image: url(url-de-tu-imagen);
}
ul#navigation .imagen4 a {
background-image: url(url-de-tu-imagen);
}
ul#navigation .imagen5 a {
background-image: url(url-de-tu-imagen);
}
ul#navigation .imagen6 a {
background-image: url(url-de-tu-imagen);
}
ul#navigation .imagen7 a {
background-image: url(url-de-tu-imagen);
} Ahora lo ultimo es agregar el codigo html:
ve a Diseño > Añadir gadget > elije > HTML/Javascript y pega el siguiente código:
<ul id="navigation">
<li class="imagen1"><a href="#" title="nombre-imagen"></a></li>
<li class="imagen2"><a href="#" title="nombre-imagen"></a></li>
<li class="imagen3"><a href="#" title="nombre-imagen"></a></li>
<li class="imagen4"><a href="#" title="nombre-imagen"></a></li>
<li class="imagen5"><a href="#" title="nombre-imagen"></a></li>
<li class="imagen6"><a href="#" title="nombre-imagen"></a></li>
<li class="imagen7"><a href="#" title="nombre-imagen"></a></li>
</ul> OK. Ahora tiene que personalizarlo para ti
Lo que esta de color rosado es donde se pone la URL de la Imagen del Boton
Lo que esta de color rojo es la direccion del enlace que dirije el boton
Lo que esta de color Azul es el el texto que se mostrara al pasar el mouse sobre el boton
Lo que esta de color Verde es la cantidad de Milisegundos que tarda al sobresalir el boton
En el codigo HTML donde muestra Imagen1, Imagen2 y asi sucesivamente corresponde al codigo CSS. Eso quiere decir que donde pones la URL de la imagen1 en el CSS. se mostrara en el link de "Imagen1" en el HTML
CHAO! =)
