Añadir Efecto Esquina Plegable en el Blog de Blogger

Seguramente abras visto en alguna página web este efecto que veremos hoy día, el script se llama How To Page Peel Effect está basado en javascript, imágenes, flash, y lo podemos utilizar en nuestro blog de forma gratuita gracias a hongkiat. Puedes verlo funcionando en mi blog de pruebas.

Cuando apliques este efecto a tu sitio verás un pliegue tipo pegatina en la esquina superior derecha de tu blog, y al pasar el mouse por encima este pliegue te muestra la información que hay detrás, esto las páginas web lo utilizan para promocionar sus productos, pero nosotros lo podemos utilizar en nuestro blog para dar a conocer otro blog que tengamos, blog de un amigo, o lo que tú quieras.

Ahora veremos cómo ponerlo en tu blog de blogger, primero tienes que tener la librería jQuery, es posible que ya la tengas si has aplicado otro efecto utilizando esta librería, pero si no la tienes copia y pega el siguiente código justo antes de </head>

<script src='http://dl.dropbox.com/u/3373498/PazosBlogger/jQuery1.3.2.min.js' type='text/javascript'/>

Ahora tienes que copiar el siguiente código que te dejo en está otra página y pegalo en el Bloc de notas,WordPad, o Dreamweaver para configurar algunos parametros que te muestro a continuación.

Configuración

var jaaspeel = new Object();

jaaspeel.ad_url = escape('http://www.pazosblogger.com');

jaaspeel.small_path = 'http://dl.dropbox.com/u/3373498/PazosBlogger/small.swf';
jaaspeel.small_image = escape('URL-de-tu-imagen-PEQUEÑA');
jaaspeel.small_width = '150';
jaaspeel.small_height = '150';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;

jaaspeel.big_path = 'http://dl.dropbox.com/u/3373498/PazosBlogger/large.swf';
jaaspeel.big_image = escape('URL-de-tu-imagen-GRANDE');
jaaspeel.big_width = '600';
jaaspeel.big_height = '600';
jaaspeel.big_params = 'big=' + jaaspeel.big_image + '&amp;ad_url=' + jaaspeel.ad_url;

Cambia lo que está en color rojo por la dirección web a la que quieres que dirija cuando hagan clik.
Lo que está en color azul tienes que poner tus imágenes una pequeña de 100 x 100 pixeles y la grande de 500 x 500 pixeles.
El pliegue antes de pasar el mouse por encima lo puedes cambiar al tamaño que tú quieras, en el código te lo dejo en color celeste está en 150 tienes que cambiar tanto el ancho como el alto.
Por último el tamaño del pliegue cuando pase el mouse por encima es de 600 se los dejo en color naranja también tienen que cambiar el ancho y alto.

Una vez has configurado todo lo guardas y lo subes a tu propio servidor de archivos, para los que no saben donde subir sus script lean este artículo, tu servidor de archivos te dará la dirección del script y tienes que pegarla en el siguiente código que te dejo abajo, luego lo pegas justo antes de </body>:

<script src='URL-de-tu-script' type='text/javascript'/>

Si todo ha ido bien verás el efecto en acción en tu blog, y si tiene algún problema hásmelo saber por medio del formulario de comentarios.

Descargar Script + Archivos swf