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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp6Y5r2QO8nb2CtROZ-QTtbZ8jEjg5if3GMaac2I5YppSvTrn5U2-nRw63fPwZftb70LbtgC3dY6AXoCg7Pfb9Rwpxx4OnvUgAoWpjrwgECBzf78jNdLx5YeAxFg7Sb6JlPfP5SCnOXQGY/s1600/mini_rss.png) no-repeat right top #fff;
}
</style><a href='http://realcombiz.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNZ8ThCPB_2IvRviLQs6XbpFDg646tsrLa2_pBaBzjGiNJ4f-Z7ukEfN3752U5fU_dlZgGvPWs_20c-5oRGKlxlCtCr356V4i00c0mkUFZYlZJ8zxqmMM6tC9MVfs_mN0ZVAb10sQHbnM/s1600/1x1juice.png'/></a><script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .back-img").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".back-img").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
</script>
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp6Y5r2QO8nb2CtROZ-QTtbZ8jEjg5if3GMaac2I5YppSvTrn5U2-nRw63fPwZftb70LbtgC3dY6AXoCg7Pfb9Rwpxx4OnvUgAoWpjrwgECBzf78jNdLx5YeAxFg7Sb6JlPfP5SCnOXQGY/s1600/mini_rss.png) no-repeat right top #fff;
}
</style><a href='http://realcombiz.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNZ8ThCPB_2IvRviLQs6XbpFDg646tsrLa2_pBaBzjGiNJ4f-Z7ukEfN3752U5fU_dlZgGvPWs_20c-5oRGKlxlCtCr356V4i00c0mkUFZYlZJ8zxqmMM6tC9MVfs_mN0ZVAb10sQHbnM/s1600/1x1juice.png'/></a><script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .back-img").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".back-img").stop()
.animate({
width: '50px',
height: '50px'
}, 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOSDcu6nAWLVhdb9AWzQQCjg3DGrFyu_wg2rebnYtYDMHfQV-428SBSP0YP0GSg53zjsd74NGJ7LdBJWdA_HUgNUlY8cgFPaU7ACVErYC0irM9ioFY_M8fLNlP15SUk2IhWtlueK_26K5a/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div>
<a href=' http://feeds.feedburner.com/realcombiz '><img alt='Realcombiz' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOSDcu6nAWLVhdb9AWzQQCjg3DGrFyu_wg2rebnYtYDMHfQV-428SBSP0YP0GSg53zjsd74NGJ7LdBJWdA_HUgNUlY8cgFPaU7ACVErYC0irM9ioFY_M8fLNlP15SUk2IhWtlueK_26K5a/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div>
- Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp6Y5r2QO8nb2CtROZ-QTtbZ8jEjg5if3GMaac2I5YppSvTrn5U2-nRw63fPwZftb70LbtgC3dY6AXoCg7Pfb9Rwpxx4OnvUgAoWpjrwgECBzf78jNdLx5YeAxFg7Sb6JlPfP5SCnOXQGY/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"
Hope you like this? any suggestion or question is welcome and take few seconds to share it with followers/friends.
Subscribe For Free Updates!
*Please confirm the email sent to your inbox after clicking "Sign Up!".
Subscribe RSS
Follow us on Facebook
Follow us on Twitter
Circle us on Google+
Connect on LinkedIn
Follow us on Pinterest
Connect on StumbleUpon
0 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.