Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

Add Page Peel/Flip Effect Using JQuery

Page peel effect is another great way to attract visitors attention, because it will appear at the top of your blog and it will peel on mouse hover. it may serve as a medium through which you can increase your blog subscribers as it is use on the demo page. This effect was created using simple css and jquery and i have made so simple to implement.




How To Add Page Peel Effect

  • If you have already install jquery plugin, skip this step, but if not, add the code below inside/after <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
  • Now go to "Design" > "Edit HTML"
  • Use ctrl F to find </head> and paste the following code above/before it
<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://3.bp.blogspot.com/-HAvgxzbgzPg/UE-KcuJyFWI/AAAAAAAAA5w/2wb-jmsGcHc/s1600/mini_rss.png) no-repeat right top #fff;
}
</style><a href='http://realcombiz.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>
  • Copy the following code Inside/after <body> or search for <body and paste the code below after the close tag ">"
<div id='pageflip'>
<a href=' http://feeds.feedburner.com/realcombiz '><img alt='Realcombiz' src='http://2.bp.blogspot.com/_1fRuBdlSpLw/TJcc3k62mWI/AAAAAAAAAps/uSj6nCe_CB4/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div>

  • Replace http://3.bp.blogspot.com/-HAvgxzbgzPg/UE-KcuJyFWI/AAAAAAAAA5w/2wb-jmsGcHc/s1600/mini_rss.png with your preferred image link, it is rss icon by default.
  • Replace http://feeds.feedburner.com/realcombiz with your feed link, or change it to any link you want to point your image to
  • Preview your changes and click "SAVE TEMPLATE"
    That's all.
    Hope you like this? any suggestion or question is welcome and take few seconds to share it with followers/friends.



    Go Social:

    Subscribe For Free Updates!

    *Please confirm the email sent to your inbox after clicking "Sign Up!".

    3 comments : Post Yours! Read Comment Policy ▼
    PLEASE NOTE:
    We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

    About Me

    My Photo
    Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

    Recent Posts

    Let's Connect

    Site Links

    Copyright © 2014 RealcomBiz. All Rights Reserved.
    Powered by Blogger