How to add peel effect for blogger blogs and wordpress with subscribebutton!!!!

Hello
This is an awesome effect which is a must for beginners,  to increase their subscribers.
Take a quick demo here (blogger)
Take a quick demo here(wordpress)
I was surfing the internet for a long time for this.
Here are some screen shots of the following plugin:


Normal


When hovered.

First of all I would like to thank  Lasantha for this tut in bloggertricks.net
Here is the tutorial for wordpress (easy than blogger)
Just add the following plugin :http://wordpress.org/extend/plugins/jquery-page-peel/
That's all for wordpress!!!.

For blogger do the following.
Login to blogger.
Click design then edit html and check expand widget templates.
Then find  ]]></b:skin>
Before it add the following code 

#pageflip {position: relative;}#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;position: absolute;z-index: 50;right: 0; top: 0;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFiOooq7XWfbPmjUN-uER8tWrWCH_TJOdrxr6ZgBLuhIJRhr8Un8EKhoIp0AAoCmJhFY3wjh7xhnA9FsQyfTNr4ZhBlCAzrKYePQXTgl0skPe5iAFW7SBkoBswV94tTNHaEt20l3ur_IoC/) no-repeat right top;text-indent: -9999px;}

Note : Please host 'subscribe.png' image yourself.

5.Scroll down to where you see </head> tag:

6.Copy below code and paste it just before the </head> tag.

<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: '307px',   height: '319px'  }, 500); } , function() { $(&quot;#pageflip img&quot;).stop()  .animate({   width: '50px',   height: '52px'  }, 220); $(&quot;.msg_block&quot;).stop()  .animate({   width: '50px',   height: '50px'  }, 200);});

});</script>

6.Scroll down to where you see <body> tag:

7.Copy below code and paste it just after the <body> tag.

<div id='pageflip'><a href='http://feeds2.feedburner.com/baratworld'> <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBMuL8LhaYds4w7wn_uA-2uYTNhWXmgKqJhdMEjkLGa3RPSF_fSXwPmAEpQA4FzWM7pr5T-o1UTQCD-jlA0J8RaaacAyhxu-K3H6r1TPn2qqf11Q91veVTnt9Mj9YLhEjsXWuOa0lIarQ-/'/> <span class='msg_block'>Subscribe via RSS</span></a></div>

Note : Please host 'page_flip.png' image yourself.

Replace 'http://feeds2.feedburner.com/baratworld' with your feed address.

I repeat again this is not my effort and all the credit goes to Lasantha.

But please drop your comments if you have any doubts.

Thanks for watching