7 October 2012

Add Page Peel effect on Blogger

Page Peel effect on Blogger
Page Peel effect on Blogger.Do you heard about page peeling effect? If not you can see the above screenshot. You can place ads, your twitter icon,rss feed, your facebook icon and etc. without wasting the space of your page by adding page peeling effect to your blogger blog.This awesome trick used by many professional and other Websites/Blogs.This page peel attract Blog visitors and they may have the tendency to click on ad and your earnings increases.Also this page peel can be used to increase your Subscribers.Here we're going to show you how to add a page peel effect on Blogger.

Live Demo

Add Page Peel Effect On Blogger

  • First log onto Blogger Dashboard>> Template>> Edit HTML
  • Then search(ctrl+f) for the </head> code 
  • Then above it paste the following code

<style type="text/css">img { behavior: url(iepngfix.htc) }#peeloff {position: relative;right: 0; top: 0;float: right;}#peeloff img {width: 50px; height: 52px;z-index: 99;position: absolute;right: 0; top: 0;-ms-interpolation-mode: bicubic;}#peeloff .msg_block {width: 50px; height: 50px;overflow: hidden;position: absolute;right: 0; top: 0;background: url(http://2.bp.blogspot.com/-lPbDnLF2nLc/UHZce7i400I/AAAAAAAAAKU/UoD50iPYs3s/s1600/rss.png) 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$("#peeloff").hover(function() {$("#peeloff img , .msg_block").stop().animate({width: '307px',height: '319px'}, 500);} , function() {$("#peeloff img").stop().animate({width: '50px',height: '52px'}, 220);$(".msg_block").stop().animate({width: '50px',height: '50px'}, 200);});});</script>

 Note:  The image appeared inside the opened sleeve  can be changed by changing the red coloured URL of the above code (Change that red coloured URL with your desire image URL).

  •  Now search(ctrl+f) for <body> code 
  •  Next paste the below code after <body> tag

<div id='peeloff'><a href='Your Facebook/twitter/feedburner/ads URL HERE'><img alt='' src=' http://4.bp.blogspot.com/_p4Te9Li52fs/So9QXjPscRI/AAAAAAAAAAM/Vl2QGxYn38k/page_flip.png'/></a> <div class='msg_block'></div></div>

 Note:  You can change the blackcoloured sleeve which opens once you bring the mouse over it by changing the red coloured link in above code with the desired image URL you'd like to see there.

  • Add your facebook/twitter/feedURL in the place of Your Facebook/ twitter/ feed/ads URL HERE in above code.

 Must Read : CSS3 and Jquery Drop Down Menu

That's it.You're all done.If you're still facing any problem regarding this just use the comment box below.

Articles You May Like

10 comments: Leave Your Comments

  1. I have yet to try this tip, thanks for sharing. But will my page not get too heavy when loading?

  2. wow thanks for the tutorial, this is cool. will try it out on my blog.

  3. Oooh I've seen of this effect in some pages, maybe I'd try it soon. *bookmarked*

  4. I have just learn something new with your blog. Kindly visit my blog and tell me what i need to do to improve the looks.


    1. u may use custom template provider from various site,but 1st u should disable capcha option on the comment section,it's irritate the readers to comment.

  5. I never heard about page peel effect, but I think it's awesome! thanks for the code :)

  6. Page feel effect looks really cool in a blog.