Page peel también llamado, Peel Away, es un efecto que recrea un pliegue como el que haría una hoja de papel, en nuestra página web. Como se trata de una animación todavía resulta más llamativo y es el sitio ideal para insertar anuncios u otros elementos sobre el que queramos llamar la atención.
Algunas plataformas incluyen este formato entre su catálogo de anuncios. Sin embargo también podemos crear nosotros mismos este efecto e incrustar dentro del mismo una imagen (por ejemplo; un banner) que llevará a la dirección URL que deseemos.
Tenéis una demostración en esta página (en la esquina derecha superior). No me digáis que no es está muy chulo.
Ahora, busca la etiqueta de cierre '</head>' y justo debajo de ella pega el siguiente código javascript. También puedes pegarlo en el interior de cualquier widget HTML / javascript y funcionará sin problemas.
Algunas plataformas incluyen este formato entre su catálogo de anuncios. Sin embargo también podemos crear nosotros mismos este efecto e incrustar dentro del mismo una imagen (por ejemplo; un banner) que llevará a la dirección URL que deseemos.
Tenéis una demostración en esta página (en la esquina derecha superior). No me digáis que no es está muy chulo.
Insertar un "pliegue de página" animado en tu web o blog
Lo primero que tienes que hacer es copiar y pegar este código CSS antes de la etiqueta de cierre "]]></b:skin>" en el código de la plantilla de vuestro blog:/* == MBL Page Peel PRO Effect For Blogger == */
.admin-bar #PagePeel{top:27px;}
/*20px extra de ancho y largo para la sombra y el movimiento*/
#PagePeel{
height:120px;
overflow:hidden;
position:absolute;
right:0;
top:0;
width:120px;
z-index:9999;
}
#PagePeel svg{
overflow: hidden;
position: absolute !important;
right: 0;
top: 0;
}
#PagePeel .pointCursor:hover{cursor:pointer;}
#mycontent { position:relative; margin-left:30px; }
Ahora, busca la etiqueta de cierre '</head>' y justo debajo de ella pega el siguiente código javascript. También puedes pegarlo en el interior de cualquier widget HTML / javascript y funcionará sin problemas.
<!--MBL Page Peel PRO Effect For Blogger-->
<script type='text/javascript' src='https://googledrive.com/host/0B0WJjcJEFNziazIzXzlhMlhtWlU'></script>
<script type='text/javascript' src='https://googledrive.com/host/0B0WJjcJEFNziMmk4anpFWnRPWHc'></script>
<script type='text/javascript' src='https://googledrive.com/host/0B0WJjcJEFNzidExmT1JpWV9xNmc'></script>
<div id="mycontent">Peel Away Effect By <a href="http://www.mybloggerlab.com">MyBloggerLab.com</a></div>
<script type='text/javascript'>
/* <![CDATA[ */
var PagePeelProParams = {"smallImageUrl":"http://ruta/imagen-pequeña.png","largeImageUrl":"http://ruta/imagen-grande.png","peelColorStart":"#545454","peelColorEnd":"#cdcdcf","pagePeelTargetUrl":"http://www.pagina-destino.com","pagePeelActivateEvent":"hover"};
/* ]]> */
</script>
Cómo personalizar tu page peel e incluso conseguir ingresos con él
Tal vez este page peel no sea el idoneo para mostrar anuncios procedentes de banners automáticos como los de Adsense. En este caso concreto, la compañía no permite que los anuncios se vean solapados, ni posiblemente modificar sus dimensiones de esta manera.
Aún así podremos recurrir a usar banners de programas de afiliación, los nuestros propios o cualquier otra imágen y una dirección de destino a donde enviar a las visitas. Por ejemplo; una página de aterrizaje, una de tus entradas, una categoría, etc.
Todo lo que te queda por hacer es personalizar el código con tus elementos. Reemplaza las rutas; http://ruta/imagen-pequeña.png y http://ruta/imagen-grande.png con las imágenes que quieras usar. Su tamaño es de 500x500 píxeles.
Sustituye http://www.pagina-destino.com por la URL a la que quieras que envíe la imagen al hacer click en ella. Puedes dejar este campo en blanco si solo quieres usar este page peel para efectos de notificación solamente.
Sinceramente, dudo que puedas encontrar un page peel con un aspecto tan genial como este, y además gratis. La autoría es del equipo de MBL que han hecho un gran trabajo. Dudo que puedas encontrar otro mejor (pero si eso, avísame).