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

Add Page Peel/Flip Effect Using JQuery

by Unknown | Tuesday, September 11, 2012 | | 4 Comments

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'>
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .back-img&quot;).stop()
    width: &#39;307px&#39;,
    height: &#39;319px&#39;
    }, 500);
    } , function() {
    $(&quot;#pageflip img&quot;).stop()
    width: &#39;50px&#39;,
    height: &#39;52px&#39;
    }, 220);
    width: &#39;50px&#39;,
    height: &#39;50px&#39;
    }, 200);
  • 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'/>

  • 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!".

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

    1. Uncharted 5 will be unbelievable if Cassie came in as Nate's replacement! As the daughter of Elena and Nathan, she has all the resources she will ever need to become the next treasure hunter in the family. And having her as the protagonist will ensure that we get to see Nate, Elena, and everyone else in at least some capacity. Uncharted 5 Release Date


    Recent Posts

    Let's Connect

    Site Links

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