Recommended Article for you : Awesome 50% cashback OFFER Debit Recharge

Add Page Peel effect with jQuery & CSS to Blogger

page peel for blogger
You may saw this awesome trick used by many professional and other Websites/Blogs.This Page peel is used to Show ads ,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 I am going to show you how to add a page peel trick to Blogger blog.







Click the link below to view demo

Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)
  • Copy the below code inside <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Add page peel effect to blogger blog 

Step 2 : 
  • Go to Design->Edit HTML
  • Copy and paste the below code above </head>
<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(http://2.bp.blogspot.com/-ozIbZSc4kLo/T1SpesMOYpI/AAAAAAAAAKM/NtX4Wf48t_o/s200/rss+netoops+blog+page+peel.png) no-repeat right top #fff;
}
</style><a href='http://netoopsblog.blogspot.com'><img src='http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/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:
<div id='pageflip'>
<a href=' http://feeds.feedburner.com/NetOopsBlogTips '><img alt='netoops blog' src='http://2.bp.blogspot.com/_1fRuBdlSpLw/TJcc3k62mWI/AAAAAAAAAps/uSj6nCe_CB4/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div>
Change can the RED highlighted text with url image url that you want,else leave it default(needn't change)
Change the BLUE highlighted text with your feed URL or place your advertisement
  •  Save the Template
You are done..! If any problem persists please do comment.
:) :( ;) :D :-/ :x :P :-* =(( :-O X( :7 B-) #:-S :(( :)) =)) :-B :-c :)] ~X( :-h I-) =D7 @-) :-w 7:P 2):) :!! \m/ :-q :-bd ^#(^
Close [x]

12 comments :

  1. Great result after implement your tips Michigan SEO

    ReplyDelete
  2. Thanks eilersmarketting..:)

    ReplyDelete
  3. its there its not peeling down.plz help...www.gadgetfiles.tk

    ReplyDelete
  4. Hi Valsaraj,

    Sorry mate but it does not work for me. I'm using IE9 and have followed your instrctions to the T. However, all I see is the page_flip.png image on the left of the screen surrounded by a blue border. Can you point me in the right direction?

    ReplyDelete
    Replies
    1. Please wait for next replay I'll replay soon,
      The best answer is please use Mozilla .Mozilla is the better browser ever and it is free for download..

      Delete
  5. D
    Do
    Don
    Don,t
    Don,t m
    Don,t mi
    Don,t miss
    Don,t miss t
    Don,t miss th
    Don,t miss thi
    Don,t miss this
    Don,t miss this o
    Don,t miss this of
    Don,t miss this off
    Don,t miss this offe
    Don,t miss this offer
    Don,t miss this offer t
    Don,t miss this offer th
    Don,t miss this offer thi
    Don,t miss this offer this
    Don,t miss this offer this e
    Don,t miss this offer this ea
    Don,t miss this offer this ear
    Don,t miss this offer this earn
    Don,t miss this offer this earni
    Don,t miss this offer this earnin
    Don,t miss this offer this earning

    To see new and latest updates just visit www.crackstrick.blogspot.com


    Features of our site

    Widgets for Blogger

    =>blogger tricks

    =>blogging tips

    =>SEO tips

    =>Tips for high traffic

    =>make money online

    =>computer tips

    =>tips and tricks

    =>computer tricks

    =>internet tricks

    =>Cracked software

    =>hacking tools

    =>mobile tips

    =>mobile tricks

    =>Adsense Earning

    =>Earn money online

    =>Online Jobs ,

    =>Windows tips and tricks

    =>Small And Easy Jobs

    =>Adsense Alternatives

    =>Modem Unlocker

    =>Serial keys

    ReplyDelete
  6. I was unable to do step 3. Please help me out!!

    ReplyDelete
  7. what "copy the code [INSIDE] <head " means?

    ReplyDelete

Ask your thoughts to us,We are happy to help you.


1.Please don't Spam
2.We strictly recommend to Click on Subscribe to email