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.
- Now SAVE TEMPLATE
Must Read : CSS3 and Jquery Drop Down MenuThat'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 |
About The Author
I have yet to try this tip, thanks for sharing. But will my page not get too heavy when loading?
ReplyDeletewow thanks for the tutorial, this is cool. will try it out on my blog.
ReplyDeletethanks for the tutorial :) nice tip!
ReplyDeleteRovie
The Bargain Doll
:)
cool... ma try nga
ReplyDeleteOooh I've seen of this effect in some pages, maybe I'd try it soon. *bookmarked*
ReplyDeleteI have just learn something new with your blog. Kindly visit my blog and tell me what i need to do to improve the looks.
ReplyDeletewww.blissful-union.com
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.
DeleteNice info!
ReplyDeleteI never heard about page peel effect, but I think it's awesome! thanks for the code :)
ReplyDeletePage feel effect looks really cool in a blog.
ReplyDelete