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.
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/AVvXsEgVkojeQ1pmZPw378YKf28wP9SOIiRi9jzHjNqv1BQKkkbLgQk6g1WmzLm8cwMQHzR2vbhOVh1cfQjsonf5SCnGDFyp2nRZPy5T1Y3AqbyelRTTBp-rX3Rg5xgGIQMF38rcmo_EvgOu6wda/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".
¿Problemas al comentar? Utiliza 
¡Wooooo Jaime con esto te pasaste!
Muy bueno, sí señor. Por cierto, se ve bien en mi blog y es de fondo gris un poco oscuro.
Gracias por comentar, Oliva.
Anónimo, a excepción de blogs con fondo negro, este script se visualizará perfectamente.
Para dichos blogs haría falta editar la imagen que actúa como esquina levantada.
Vaya que chulo, ay que ver lade cosas que se aprenden contigo. Besitos.
muy lindo lo que has hecho muchas gracias .
Jaime te quiero jajajaa que trucos tan chulos, el litebox lo máximo mucho más rápido que lightbox, mi pregunta es si podria como tu poner bordes y número a los comentarios y de este tema yo no puedo usarlo tengo Scriptaculous, Prototype. Me gustaria saber tu opinión sobre mi blog y en que puedo mejorarlo
http://cdvillanuevadelarzobispo-javier.blogspot.com/
Tienes una bonita plantilla, Javier, y el contenido está muy ordenado. Para modificar los comentarios de tu blog y añadirles numeración accede a esta entrada.
Con respecto al borde, fondos, márgenes y anchos en cada comentario, aún no he publicado nada pero es muy probable que lo haga pronto.
¡Maravilloso Diana! Además, el color pardo de la esquina conjunta muy bien con el fondo de tu plantilla.
Hola muy bueno tu blog, mira yo tengo un problema con esto porque ami me lo tira en la esquina de abajo. Que se puede hacer?.
Esdras, me temo que en tu plantilla no se visualizará correctamente. El motivo puede ser más de uno: la utilización de otra librería (scriptaculous) y por tanto evitar que el truco funcione o simplemente el utilizar una de las nuevas plantillas del diseñador de blogger (las cuales suelen desconfigurar trucos como este).