Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

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.


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='http://4.bp.blogspot.com/_Bvhqq3YFEx4/TPkjjM-cdHI/AAAAAAAAAfU/q9Zy4_EE7dw/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".

Oliva dice...

¡Wooooo Jaime con esto te pasaste!

Anónimo dice...

Muy bueno, sí señor. Por cierto, se ve bien en mi blog y es de fondo gris un poco oscuro.

Jaime Trujillo Escobedo dice...

Gracias por comentar, Oliva.

Jaime Trujillo Escobedo dice...

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.

Pepi dice...

Vaya que chulo, ay que ver lade cosas que se aprenden contigo. Besitos.

p dice...

muy lindo lo que has hecho muchas gracias .

Javier dice...

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/

Jaime Trujillo Escobedo dice...

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.

Diana de Iriondo dice...
Este comentario ha sido eliminado por su autor. Siento las molestias.
Jaime Trujillo Escobedo dice...

¡Maravilloso Diana! Además, el color pardo de la esquina conjunta muy bien con el fondo de tu plantilla.

Esdras Moràn dice...

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?.

Jaime Trujillo Escobedo dice...

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).

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo