Page Peel es un efecto muy sencillo, vistoso y clásico entre los sitios webs, el clásico doblez de página que aparece en el ángulo superior derecho y si le pasas el cursos por encima lo despliegas de forma muy vistosa y dinámica.
Detrás puedes agregar la imagen que tu quieras, con un enlace si le haces click encima.
Puedes verlo funcionar en este blog de pruebas.
Para ponerlo, simplemente deberás agregar estos códigos, el primero es un script que se debe agregar antes de </head> en la Edición de HTML del Blog SIN EXPANDIR ARTILUGIOS.
<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>
----------------------------------------------- */
#pageflip {
position: relative;
right: 0;
top: 0px; /* Cambiar a 30px si tienes 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/AVvXsEgkf88imVZo_zxWq4-kwJt1chZ_PHUsumcSMe5B0YVRlF8kUTTW0q92wXyyGg63kylsgs0fY1kzjQHr3c0oWLBWW72ARy_2wpnuoaju9gpQW3yB0_VxnmMP9lYhDDI-PuGo8RNDP_PvO1Y/s0/pagina-detras.png) no-repeat right top;
}
#pageflipMirror {
position: static;
right: 0;
top: 0;
float: right;
}
<a href='http://www.sigloblogger.blogspot.com'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhORdtdeL8D80jPKL9C4OSObAXYK9Kl5Wge5jfGFkdTOGb19OhibIseRVq7uohfobrgN85CTMG4JsfkTLYhZmYnqTNY69UsT-F8QZBJZU5rotJj8bF4WgunLPwpDA27dCtpzo3UUqaSbq4/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>
