Efecto página doblada en tu blog con jQuery
Se trata de mostrar en la esquina superior derecha de tu blog, un borde 'levantado', similar al de una hoja de papel, y que se despliega o levanta al pasar el cursor o puntero por encima. Este maravilloso efecto no solo resulta atractivo para nuestros lectores sino que también nos permitirá incluir un anuncio personalizado.
Pulsa sobre la siguiente imagen para acceder al blog de pruebas y comprobar el resultado.
¿Te gusta? Si es así y deseas por tanto implementarlo en tu blog, realiza los siguientes pasos.
Busca la etiqueta </head> y justo encima añade esto:
Reemplaza en el código, URL IMAGEN, con la dirección de la imagen que aparecerá bajo el blog, al pasar el cursor por la esquina de la 'hoja'.
Te aconsejo ver una imagen de ejemplo para que te hagas una idea del tamaño ideal que debería tener.
Ahora encuentra la etiqueta <body> y agrega las siguientes líneas debajo:
Guarda la plantilla y habrás terminado.
Notas:
Pulsa sobre la siguiente imagen para acceder al blog de pruebas y comprobar el resultado.
¿Te gusta? Si es así y deseas por tanto implementarlo en tu blog, realiza los siguientes pasos.
Diseño>Edición de HTML>expandimos artilugios
Busca la etiqueta </head> y justo encima añade esto:
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<link href='https://sites.google.com/site/scriptsbalcon/b/blhojja.css' rel='stylesheet' type='text/css'/><script type='text/javascript'>$(document).ready(function(){
$("#blhojasquin").hover(function() {
$("#blhojasquin img , .blhojasquina ").stop()
.animate({width: '307px', height: '320px'}, 480);
} , function() {
$("#blhojasquin img").stop()
.animate({
width: '50px',
height: '52px'
}, 200);
$(".blhojasquina").stop()
.animate({width: '50px',height: '50px'}, 200);}); });</script>
<style>#blhojasquin .blhojasquina {background: url(URL IMAGEN) no-repeat right top;}</style>
Reemplaza en el código, URL IMAGEN, con la dirección de la imagen que aparecerá bajo el blog, al pasar el cursor por la esquina de la 'hoja'.
Te aconsejo ver una imagen de ejemplo para que te hagas una idea del tamaño ideal que debería tener.
Ahora encuentra la etiqueta <body> y agrega las siguientes líneas debajo:
<div id='blhojasquin'><a href='URL PAGINA'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTPjalL0nPUB9i49-2ZZGiBtEjPJhG6jnd3c7dOkAW8Wl2OL0cwLy9B9vEL6HsKw_jbVKQEQpLeySMmGh3V8WkcemIU6qYFlzIJvWgcGyoJsPb96-yT6zpoUCuokGwoBGO5il1JQNxoJSQ/s320/blhojte.png'/></a><div class='blhojasquina'/></div>
Guarda la plantilla y habrás terminado.
Notas:
La primera línea del primer código pertenece a jQuery. Si en tu plantilla ya has implementado esta librería con otro truco no será necesario que la utilices.
Así mismo, si tienes la librería Scriptaculous o Prototype en tu plantilla (al haber instalado otro truco) y este efecto no funciona debes hacer una elección pues las tres librerías "no se llevan muy bien entre ellas".
Así mismo, si tienes la librería Scriptaculous o Prototype en tu plantilla (al haber instalado otro truco) y este efecto no funciona debes hacer una elección pues las tres librerías "no se llevan muy bien entre ellas".
0 comentarios:
Publicar un comentario
¡Gracias por comentar!