How to Add Page Peel Off Effect to Blogger Blog

To add the page peal of effect, that is when you hover over the peal of area you will watch a cool page peal off like effect. This effect is done using jQuery language is pretty amazing. So lets get started. Try out the demo link below where you will see this widget on top right corner.

Demo Link

Step 1:

Go to Design >> Edit  HTML and Search for the following tag:

</head>

 And just above the tag mentioned, past the following code.

<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#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/AVvXsEhmNpvr_mrt3uFlVLK6E9beqTkdURzaBt_uGGLeXfBADbL5KJTK7nNl2WawwkG8Gq0UsAQ19305EmSxgmCGDHFAL_VJVpgk7TWCw9t9Nlj8QB6Abw6jrifVYZcvVHYnEkgGPDfBPmFRuYI/) no-repeat right top;
}
</style>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Page Flip on hover

$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});
});
</script>

Step 2: 

Now just below the </head> tag past the following code:

<div id='pageflip'>
<a href='http://feeds2.feedburner.com/linktohow'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxA3AWSXnbNR81jDGRDgzYX1tg-YrVH6eck1eV6rnzobWUQlAJFEbc_3AOlP-6ctHDImgiarWVrMGFbMFYBtBJCsxaHYZiyltRFQZ0JW29i0yLrOCzJzPFJ1rMZbMoJe6-UT413_LNKLY/'/></a>
<div class='msg_block'></div>
</div>

Customize:

Now change the link highlighted in red in(Step 2) with your own feed link. Note its not necessary that you add your feed link, instead you can add any link you want.

Also you  can add your own subscribe button image that you see when you hover over it. This can be done by making another image of dimensions (307 x 308), and then make it diagonally half while making the other part transparent.

Notice in this subscribe image below, the half diagonal part is transparent. Likewise you can just make a triangular image too. Once the image is ready, upload it somewhere online (On your Picasa Webalbum if you want) and replace the red link in (Step 1) this time with your image link.