Ir al contenido principal

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

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

Entradas populares de este blog

Optimiza las ganancias de acortadores al máximo fácil con Lanza.me

Seguro que ya conoces  Lanza.me ; el primer acortador y metaacortador que te permite cambiar todos tus enlaces en pocos segundos a los acortadores que quieras, evitando con ellos problemas con los principales acortadores que pagan . Estoy seguro de que también conoces Shorteners.net ; el primer comparador de tasas y otras características de acortadores de acortadores que pagan y que te ofrece las tasas de estos siempre actualizadas, valoraciones y más. Ha llegado el momento de unir ambos sitios para una obtención de datos práctica y automática. Lanza.me + Shorteners.net: La unión perfecta Así es. Lanza.me y Shorteners.net ya tienen una conexión conjunta. Con ella, Lanza.me puede conocer las tasas de los acortadores y con ello, decirte cuál es el acortador que más te conviene para las visitas que recibas. Y no me estoy refiriendo al recomendador de acortadores integrado en Lanza.me , que te anuncia cuales son los acortadores que no estás empleando y que tienen

Compatible con Youtube, Lanza.me trae otras muchas mejoras

Lanza.me es es un acortador y metaacortador con funcionalidades únicas. Una de ellas es la de mostrar páginas externas de nuestra preferencia, así como acortar nuestros enlaces con los principales acortadores de enlaces. Hubo novedades, y en esta entrada te las presento. Si quieres saber más acerca de Lanza.me visita esta sección del blog . Vídeos de Youtube como páginas intermedias Desde la madrugada del 24 de febrero Lanza.me es compatible con Youtube. Cuando inserten la URL de un vídeo de youtube como una página externa, el acortador lo detectará y lo mostrará ocupando todo el ancho de la pantalla cuando los usuarios visiten el enlace. Los usuarios VIP pueden configurar estas páginas para que reproduzcan el vídeo automáticamente, con lo que conseguirán más visitas. Más datos añadidos y un repaso a las estadísticas Hace tiempo comenté que otra vez había habido cambios en las estadísticas. Miraremos más por encima esas estadísticas porque tienen algunas opciones que sería inte

Multiplica tus ingresos con el encadenador de acortadores de Lanza.me

Lanza.me es el acortador y metaacortador que he estado desarrollando durante los últimos 4 años. Con él puedes usar otros acortadores para acortar tus enlaces y cambiarlos fácilmente y en muy pocos segundos. También permite usar páginas externas para mostrar en tus enlaces cortos o simplemente usar enlaces directos.  Ya es muy estable y está lleno de opciones, como estadísticas a nivel de usuario y enlace, optimización de acortadores, alertas dinámicas y reactivas de acortadores caídos o en problemas,  listas públicas de enlaces , programa de referidos, etc. Hoy te traigo una nueva característica. Encadenador: Multiplica tus ingresos sin esfuerzo ni riesgo Este lunes 5 de julio de 2021 se ha lanzado el encadenador de acortadores. Se trata de una nueva característica, única de Lanza.me, con la que podrás conseguir duplicar tus ingresos sin esfuerzo ni riesgo. Cómo funciona el encadenador El encadenador de acortadores usa varios acortadores a la vez sobre un mismo enlace; Los visitantes