Cómo crear un 'page peel' animado y de aspecto profesional para tu blog

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

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.pnghttp://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).

4 comentarios:

  1. Está excelente! Y que bueno que mencionas que no es compatible con Adsense. Lo probaré con otro medio de publicidad :)

    Gracias por el aporte y feliz 2016!

    ResponderEliminar
  2. Hola, muy bueno el plugin. Habria alguna forma de usar jquery en una version mas moderna y no la 1.4.4 que es la que usa el codigo, es que me salen incompatibilidades con otros plugins de wordpres.. gracias!

    ResponderEliminar
    Respuestas
    1. Hola, sí.

      Sería cambiar el primer script, el que acaba en "WlU" por la dirección en donde tengas tu jQuery. Además tardará menos en cargar así.

      Debería haberlo añadido a la entrada. Miraré de hacerlo.

      Un fuerte saludo y muchas gracias a ti.

      Eliminar

Tu comentario tiene valor, dedícale unos minutos y repásalo. Si tiene faltas de gramaticales o de ortografía lo borraré. Respondo a todos así que si tienes dudas no repares en preguntar.

Si esperas respuesta acuérdate de marcar el botón de 'Avisarme'.

Y RECUERDA: Para mantener las conversaciones legibles usa correctamente el botón COMENTAR o RESPONDER cuando proceda. Muchas gracias.

Más de 2000 suscriptores reciben las entradas en su correo

Vía FeedBurner. Introduce tu dirección de correo electrónico y confirma el mensaje que te llegue.