Add Page Peel Effect to Blogger

This is An Awesome Trick Mostly Performed on Many Professional Blogs and Sites.Well This Makes An Attractive Handle On Your Blog/Site.Mostly this is Used to Show Ads,Rss Subscribe,Facebook Follow,and many Such Cases.But in this Case iam Using Rss Subscribe Option Here.Anyway you Can Change it to your Own Content.So Let's See How to Add this to Your Blog :.

So Have the Live Demo of the Widget Before Going to Apply it on to Your blog.

Live Demo

So Now that You've Viewed the Live Demo.Now Just Skip
to the Procedure to Add the Widget to your Blog.
So Let's See How this happens...

How to Add Page Peel Effect to Blogger:.

Go to Blogger < Design < Edit Html (Old Blogger)
Go to Template < Edit Html < Proceed (New Blogger).
So Now Check the Expand Widget Templates Option.

First of all You've to Add Jquery Plugin to Your Blog. (Ignore this Step if your Blog Already Has Jquery).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Paste the Above Code Inside/ Below <head> Tag..

So Now Applying the Widget to Blogger :.

Copy the Below Code and Paste it Above </head> tag.

<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/AVvXsEjXWuNIzwamjwKjuDKcc4pZe1RuXJ8mZWU4TcLba-IUjIYJXN3onxxxep-4nNhjJg71HnLAZX6S8N2n3R8r9jln6SJ-hCo2El6UqpJV3BEn8dIsCd6x7uIeZi0GRvfPkQqsrA4j4AVnLG8/s1600/rss.png) no-repeat right top #fff;
}
</style><a href='http://goodinblogging.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIyY1qDMtZ8Kpo2JW8FLwxw6oMFBACTsiu4cZLbEp5klHmxVdo_RbNk6kYheAcLdpyKL1BNLqRGCmQPKs2NsUZjogyrjDakltnUEDaKp8P4n4khVfnC8S73209Yf9-tJC5DRjpPC-Ywkg/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>

Now After Adding The Above Code Above </head> Section.
Now Applying the Effect to Blogger..
Here You Can Change the Red Colored Url With Your own Image.

Add the Below Code inside/below <body> Tag.


<div id='pageflip'>
<a href=' http://feeds.feedburner.com/Goodinblogging '><img alt='netoops blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNLH9dI4HmBwCwuvphAQke0sUE7tIp_rlg0z5UnXBFiyO61Ohm3X-yhW0lGo7iMjBc1mkMcQFk2V5pr94W4Dm_MsHxMzRLmM5G2pL2y0cpJqWcaRjp3JTqFgzY8KozIZr9f6YtZaOyPidr/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div>

Now Change the Highlighted url With Your Feed Url or Facebook Fan Page or Anything Else.That's it Now You're Done..

A Tech Blog

Blogroll

POST 1 DESCRIPTION