This page peel effect is used by many of the professional webmasters to increase their blog exposure and subcribers cuz it majorly attract the new visitor.You can also place your ads behind the peel this page peel attract  visitors and they may have the tendency to click on ad and your earning increases.I managed the time for this post very difficultly cuz my exams are next week so i have to prepare for them .


How To Add Awsome Peel Effect To Your Blog ?

  1. First of all you have to add a jQuery plugin to your blog copy the below code inside the <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
     2:   Go  To templates>>Edit html and find (ctrl+f) </head> and just above it paste the below code

<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://i47.tinypic.com/34gu8ad.jpg) no-repeat right top #fff;
}
</style><a href='http://Blogging-Heaven.com.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsu_KIFeLGCFLNnz2WkBKUpTbYpoZjw7KxQD07OsYUXKAA14cKljtgwluz1Jy_HVXbWgWra3vA72lL1SGXvwYRWHtpRWRZJAhfNV63g2TnpTJPLFgJX_iOt5Vv4_leNfdu-rHzDp-cfCY/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>
    3:   Copy the below code and past it inside the <body> this is the code which will be shown behind the peel customize it on your own needs


<div id='pageflip'>
<a href=' http://facebook.com/bloggingheaven '><img alt='Blogging-Heaven' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiayGGLDtCcfmcfJWXJgXTwcsN-X2g4bUBqI9ZHiJWMLSqmPWhDhHFDA5qBSyGuSnlDisxjTtSXX305kY3gT8ugFNkuMyxkz-Pv-X7I49Fo0i4X4gZGm3vZawsqtYbisYKRsNqgDTsQNlV-/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div>



Customization 


  • Change the Red line with the image url you want to be shown behind the peel 
  • Change the Blue colour with the link to be opened when the image is clicked behind the peel
Y84YZ226HEGV
 
Top