Efecto de Página Doblada en Blogger

Vamos a poner en nuestro blog un efecto de página doblada (Page Peel) en la esquina superior izquierda (como vemos en Taringa Más) lo cual le da elegancia y se aprovecha para colocar publicidad u otro. Este efecto se activa al pasar el cursor sobre el mismo, desplegando el doblez como si se tratase realmente de un libro o cuaderno.

Para comenzar a instalarlo, haremos lo siguiente:

Nos vamos a Plantilla:

Nos lleva a Editar HTML: 

Enseguida nos dirigimos a: Ir a Widget / Header1:

 Ahora nos desplazaremos hacia abajo, para ubicar lo siguiente:

En la parte de arriba o sea antes, pegamos el siguiente Script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

<script>
//<![CDATA[
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
//]]>
</script>

Ahora ubicaremos lo siguiente:

En la parte superior (antes), pegamos los estilos siguientes:

/* Página doblada

----------------------------------------------- */
#pageflip {
position: relative;
right: 0;
top: 0px; /* Cambiar a 30px si se tiene la navbar (barra de navegación) */
float: right;
z-index:9;
}
#pageflip img {
width: 50px;
height: 52px;
z-index: 99;
position: absolute;
right: 0;
top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px;
height: 50px;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfaJwHZNhH3ru59jjz_myb_k7JPe0YyYQ7AN6rFhx8kooAXIvweA8P_iqkuVPleme_TZuZNlEn75LwjDTghC7JiSMaLNWdoDToWBuBeV8bqjNIiCA_yirEF7qMcvttnROkXLJLN9gKKb8/s0/pagina-detras.png) no-repeat right top;
}
#pageflipMirror {
position: static;
right: 0;
top: 0;
float: right;
}

Ahora debemos ubicar esto:

Si no lo encontramos, tratemos de ubicar esto otro:

Una vez ubicado, pegaremos lo siguiente en la parte de abajo:

<div id='pageflip'>
<a href='http://taringamas.blogspot.com'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqYfgY7dniqCjb1zhDFlnmIe81VOI2JRB4DABeGT0q-Kh1yVHLpsrcvSC-AbSdLmnyvU4Jy8u-LHIBpOxZ9QI5SI5NRrFC9Jx5Z1EBo0d2xIRtcD1CPlWN6UCOZOtix7a0VK-_K0IU9XY/s0/pagina-doblada.png' style='width: 50px; height: 52px; overflow-x: hidden; overflow-y: hidden;'/></a>
<div class='msg_block' style='width: 50px; height: 50px; overflow-x: hidden; overflow-y: hidden; '/>
</div>

Ahora pulsamos en Guardar Plantilla:

Nos vamos a nuestro blog (refrescamos con F5) para ver cómo nos quedó. 

Ahora bien, lo que está escrito en Azul, lo cambiamos por nuestro propio enlace interno o externo (donde redigirá al usuario al dar clic sobre  la imágen).

Lo que está en Rojo (background: url), lo cambiamos por la dirección de nuestra propia imágen, (previamente subida a Picassa u otro), en donde obtendremos la dirección URL  de la misma.

Recuerde que la imágen deberá ser del mismo tamaño que la original, (la imágen de ejemplo es de 340x306 pixeles y la resolución de 72). Cuando elabore la suya, ya sea en Photoshop u otro programa, deberá hacerla en la forma que le mostramos enseguida: 

Debemos fijarnos si ya tenemos instalado jQuery (no se permiten dos versiones). 

Por otro lado, si estamos usando Scriptaculous o Mootools obligadamente deberemos realizar los cambios pertinentes.

Eso es todo. Por favor déjenos sus comentarios.

/ Publicado por: Uriel / Post de mi autoría y la web / Para Taringa Más / 2013

Compartir