Crear un peeling (esquina doblada) a la izquierda

Ya vimos en otra entrada cómo crear el efecto en la parte superior derecha.

Ahora veremos cómo se hace para mostrar el efecto en la parte superior izquierda.

Ver ejemplo:

Los cambios con el anterior son los siguientes:

• Se muestra a la izquierda.
• Podemos elegir la distancia a mostrar desde arriba y desde la izquierda.
• Podemos dejarla fija arriba y que se deslize con la página.
• Podemos mostrar un texto desplazandose por la imagen chica.
• Podemos mostrar un texto desplazandose por la imagen grande.

¿Cómo se hace...?

Ahora copiaremos todo el contenido del siguiente código:

• Peel-top-left.txt

Lo copiaremos en un editor de texto. (puede ser el Bloc de notas)

Lo personalizamos de la siguiente forma:

// Distancia desde arriba
var top = "0px"
//
// Distancia desde la izquierda
var left = "0px"
//
//
// cambiar: absolute: fijo arriba - fixed: se mueve con la página
var position = "position:fixed;"
//
// Flash pequeño
var smallflash ="http://img61.xooimage.com/files/1/9/4/smalltopl-23d29d8.swf"
//
// Imagen pequeña
var smallimg ="http://img61.xooimage.com/files/1/2/6/rss-0-23d2a54.png"
//
// Texto en la imagen pequeña
var scrolltxtsmall = "Suscribete"
//
// Tamaño del texto en imagen pequeña
var txtsizesmall = "20"
//
// Color del texto en imagen pequeña
var textcolorsmall = "FFFFFF"
//
//                            IMAGEN GRANDE CUANDO ABRIMOS
//
// Flash grande
var bigflash = "http://img51.xooimage.com/files/7/7/0/bigtopl-23d29cb.swf"
//
// Imagen grande
var bigimg = "http://img52.xooimage.com/files/8/5/4/rss-1-23d2a4f.jpg"
//
// URL al darle clic a la imagen grande
var urlval = "http://feedburner.google.com/fb/a/mailverify?uri=blogspot/qygH"
//
// Forma de abrir
var owindow = "blank" // blank: nueva pestaña - self: en la misma
//
// Texto en imagen grande
var scrolltxtbig = " Suscribete para estar siempre actualizado..."
//
// Tamaño del texto en imagen grande
var txtsizebig = "50"
//
// Color del texto en imagen grande
var textcolorbig = "ff0000"
//

Los archivos flash pueden descargarlos y subirlos a su propio servidor:

• Flash pequeño
• Flash grande

Ya terminado de personalizar cambiando imágenes, texto, link, etc..., lo guardamos.

Al guardarlo ponerle el nombre con terminación "js"

Ejemplo: peel-top-left.js

Ahora lo subimos a un servidor.

Puede ser Xooimage.com

Si no saben como, ver el siguiente manual: Tutorial Xooimage

Ya subiro el archivo "js"

Vamos a Diseño, Edición de HTML y justo arriba de </body>

Poner el código así:

<script src='URL del archivo.js'/>

Cambiar: URL del archivo.js por el link propio.

Hacer Vista Previa y si todo quedo bien Guardar.

Tener en cuenta que la URL tiene que terminar en .js y no en .js/

Si lo suben a xooimage.com es el link generado al hacer clic sobre "Télécharger".