Peel effect Rss Subscription Widget For Blogger

You may see this peel effect to many other blogs,I just edited it and add feed burner icon + link inside it.

How it work?

After installing this widget to your blog,it will start appearing top right corner of your blog,when some one mouse over it the peel effect will start and subscription icon will shows.

In this Post i will teach You how to add this peel effect Rss Subscription widget to blogger.

Live Demo


Follow Below Steps to add this widget to your blog.

Step 1

Add jQuery plugin (if your blog have a jquery plugin,ignore this step)

• Go to blogger dashboard.
• Click on Template>>>Edit Html.
• Now search </head>
• Copy And paste below Code Above </head> code.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Steps 2

• Go to blogger Dashboard.
• Click on Template>>>Edit Html.
• Now search </head>
• Copy And paste below Code Above </head> code.

<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/AVvXsEglK3DCr6wcq0M27ckQSw-EyUjc84U_Nc2Sud6dkQWYBwfbkS5-LzUTgMd4Jwtz9O2WHr2UdUeI6kMUMIQUtu1A-EbXXg0ciHaPF1cDpMQP-a2WkVOFUW3JYZ_7mG2OiwxcscjHyon3TbA/s200/rss+netoops+blog+page+peel.png) no-repeat right top #fff;}</style><a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOh_xs3W8wjCNiStJ0r7wsF1CEr4-CYgkT_hY-tOkhxae1bEl-P8tMiqBDABG08zsuSPyHbjBxLmVOV9ySkQqrewcZI92DwqoIhApxxLUuifdF-v3WaxWkZYlfxq47Cu_yPyIbmK76Mac/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>

Step 3

• Go To Blogger Dashboard.
• Click on Template>>>Edit Html.
• Now Search </body>
• Copy And paste below Code Above </body> code.

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

Now save Template.


You're Done!!! If Any Problem Feel Free To Comment