Hoy les traigo un efecto muy bonito para quien le guste claro,se trata de el borde de una esquina de sus sitio web se va a encontrar como doblada (page peel) y mostrando una imagen pequeña la cual debe ser de 100px x 100px o un letrero o lo que se les ocurra una ves pasen el mouse (raton) por encima de esa pequeña imagen se desplegará y va a mostrar una imagen oculta que va a ser un enlace hacia donde ustedes quieran esa imagen debe de ser de 500px x 500px una ves quiten el mouse de encima de ella se vuelve a poner pequeña,Hasta hace no mucho, todos los scripts para generar el efecto Page Peel eran de pago, sin embargo, poco a poco han ido apareciendo alternativas gratuitas basadas en javascript, flash, jquery, etc. A continuación les muestro como implementarlos en sus página web o blog.
En todo el codigo lo unico que deben modificar es lo siguiente .
jaaspeel.ad_url = escape('http://feeds.feedburner.com/blogspot/dfaMG'); Url de enlace a donde quieras que te dirija ar dar click
jaaspeel.small_path = ' http://img5.xooimage.com/files/7/9/7/small-1e8e2b.swf'; flash pequeño
jaaspeel.small_image = escape(' http://dl.dropbox.com/u/25944020/rss3d.gif'); imagen pequeña
jaaspeel.small_width = '100';
jaaspeel.small_height = '100';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;
jaaspeel.big_path = ' http://img26.xooimage.com/files/5/7/a/large-1016114.swf'; flash grande
jaaspeel.big_image = escape(' http://dl.dropbox.com/u/25944020/corner.gif'); Imagen grande
jaaspeel.big_width = '500';
jaaspeel.big_height = '500';
Lo que termina en swf es el efecto flash lo pueden dejar asi si quieren .
Los gif son las imagenes que deben de cambiar
Una ves visto los cambios que debemos hacer vamos a proceder a copiar el codigo hagan los cambios debidos y lo guardan con el nombre que quieran siempre terminando en .js ejemplo : esquina.js o borde.js
Nota el notepad sirve para guardarlo en el ,así que copien el codígo y peguenlo en el notepad modifican los cambios correspondientes y lo guardan con el nombre que quieran terminando en .js
Pueden copiarlo o descargarlo como quieran descargalo aquí
var jaaspeel = new Object(); jaaspeel.ad_url = escape('http://feeds.feedburner.com/blogspot/dfaMG'); jaaspeel.small_path = ' http://img5.xooimage.com/files/7/9/7/small-1e8e2b.swf'; jaaspeel.small_image = escape(' http://dl.dropbox.com/u/25944020/rss3d.gif');jaaspeel.small_width = '100'; jaaspeel.small_height = '100'; jaaspeel.small_params = 'ico=' + jaaspeel.small_image; jaaspeel.big_path = ' http://img26.xooimage.com/files/5/7/a/large-1016114.swf'; jaaspeel.big_image = escape(' http://dl.dropbox.com/u/25944020/corner.gif'); jaaspeel.big_width = '500'; jaaspeel.big_height = '500'; jaaspeel.big_params = 'big=' + jaaspeel.big_image + '&ad_url=' + jaaspeel.ad_url; function sizeup987(){ document.getElementById('jcornerBig').style.top = '0px'; document.getElementById('jcornerSmall').style.top = '-1000px'; } function sizedown987(){ document.getElementById("jcornerSmall").style.top = "0px"; document.getElementById("jcornerBig").style.top = "-1000px";}jaaspeel.putObjects = function () { // <jcornerSmall> document.write('<div id="jcornerSmall" style="position:absolute;width:'+ jaaspeel.small_width +'px;height:'+ jaaspeel.small_height +'px;z-index:9999;right:0px;top:0px;">'); // object document.write('<img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: '+jaaspeel.small_height+'px; width: '+jaaspeel.small_width+'px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="jcornerSmallObject" data-original-id="jcornerSmallObject" /></div>');document.write('</script>'); // </jcornerSmall> // <jcornerBig> document.write('<div id="jcornerBig" style="position:absolute;width:'+ jaaspeel.big_width +'px;height:'+ jaaspeel.big_height +'px;z-index:9999;right:0px;top:0px;">'); // object document.write('<img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: '+ jaaspeel.big_height +'px; width: '+ jaaspeel.big_width +'px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="jcornerBigObject" data-original-id="jcornerBigObject" /></div>'); // </jcornerBig> setTimeout('document.getElementById("jcornerBig").style.top = "-1000px";',1000); } jaaspeel.putObjects();
Bueno una ves hecho todo nada mas falta subir el archivo .js a un servidor pueden usar xooimage subes el archivo desde tu pc y una ves cargado nos brinda una url al igual que dropbox la cual vamos a copiar y poner en el siguiente codigo:
<script src='AQUI VA LA URL DEL ARCHIVO.js' type='text/javascript'/>
Y lo vamos a poner despues de la etiqueta <body>
guardamos y es todo disfrutenlo
:)
:(
;)
:D
;;-)
:-/
:-O
X(
B-)
#:-S
:((
:))
=))
~X(
:-t
8-
=P~
#-o
=D7
:-SS
:-q
:-bd
Hola queria felicitarte porque eres un genio desde hace tiempo estaba buscando esto en algunos lugares lo brindaban pero no funcionaba y en otro habia que pagar pero tu lo brindas completamente gratis y si me funciona que bien estoy muy feliz gracias por compartirlo y explicarlo tan bien.
ResponderEliminar:-) :-P :-(
Favian:muchas gracias por tu visita y tu comentario y me alegro mucho que te alla gustado y funcionado aqui estamos para ayudar lo que necesites no dudes en preguntar todo lo que encuentres aquí es gratis.
ResponderEliminar:-[
no logro que se vea bien en mi blog, me pisa el diseño original.
ResponderEliminarVa en el header.php seguro? detras de la etiqueta body?...
No lo logro :S
Anónimo:Hola y gracias por tu visita algo estas haciendo mal ese codigo no va en el head si no despues de el body recuerda que en blogger no se usa php simplemente descarga el codigo o copialo guardalo como el nombre que quieras.js y subelo a un hosting obten la url y pegala en el codigo donde explico arriba la pones en la plantilla despues del body y es todo .cualquier duda no dudes en prguntarme.saludos
ResponderEliminar