You may have seen that on some blog or website page a sensory effect would be added and the effect of the page will be useful in promoting some products, such as e-books and other affiliate promotions.
What your visitor may be interested in, what is hidden behind this page, and this mainly works when the visitor hovers over it, and this page peeling works using simple JQUERY and CSS. 

page peel effect
How To Add Page Peel effect with JQUERY & CSS to Blogger?


How to add this page peel effect?

First you need to add a JQuery plugin to your blog if you have already added then skip this step but if you have not added the JQuery plugin then add this following code into your blog.

Go to Blogger Dashboard-->Template-->Edit HTML-->Proceed then find <head> after that add this following code.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
Next find </head> and paste the following peace of code right above it.

<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: absolute;
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 .back-img {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;z-index:98;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLdLT9SlABKxHEkfYm0p-4WJQO6eLQZgaPPZEYxlQ29V_n8kZdkgAWXRMaxpK4ZQwLLGaH43A5BYQSxLdJ4N_fVjlpbiNWm432yuzDr9td-d0TzfqebLwMnGtUbYPPHKbyYgVoJ3XTtJLq/s1600/mini_rss.png) no-repeat right top #fff;
}
</style><a href='http://bestbloggertutorials.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv5Lg0qxIRYs0fA8LZHfxqXs4BKwZQz_2G_bEpybyRAY9lCfgk0SdMpW7rncy6jtcpmqJoqo6kFI8OYZbDygkqWFBobG0bP1V7K1z4D_SuaIidMXEJfnDUScv5mjNKL-EymcDR8OKT7_g/s1600/1x1juice.png'/></a><script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .back-img&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;.back-img&quot;).stop()
    .animate({
    width: &#39;50px&#39;,
    height: &#39;50px&#39;
    }, 200);
});
});
</script> 


Note:Replace image link url with your preferred your image url by default the image is rss.

<div id='pageflip'>
<a href=' http://feeds.feedburner.com/YourFeedBurnerName '><img alt='BestBloggerTutorials' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTiFdvkAOGDomR-3coI380p2IiM8lOi4XHeBhn0osrNfgWu6LqNdE9A58r-VCYIQUpM1InOeS7UVDyxaRkLv0ABGtK9QbhGM5IjLWI91YNiwJMNxExrU8TgjSpvnt_3qLz9EDZVHDmr7qj/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div>


Note:Replace YourFeedBurnerName with your FeedBurnerName.

Don't forget to share this post. Take good care of yourself and your loved ones.