15
comments
How to Add Page Peel / Flip Effect in Blogger using JavaScript and CSS

You might have seen the page flip effect on many professional websites and blogs. Today we will see how you can add page peel / flip effect in blogger using little bit of JavaScript and CSS.

Add Page Peel Effect in Blogger

This post will help you to get the same effect on your Blog which cane be used to display any advertisements, RSS feeds or whatever you want and link it too.

Steps to Add Page Peel/Flip Effect in Blogger using JavaScript
Note: Before making any changes to your template, take a full backup of your blogger template.
#Step 1. Log in to your Blogger Dashboard and Navigate to Design> Edit HTML.

Design Edit HTML


#Step 2. Copy below code and paste it just before the </head> tag.
<style type="text/css">
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
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 .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://1.bp.blogspot.com/_1fRuBdlSpLw/TJUuu2naWxI/AAAAAAAAApQ/BjywNdEAEXg/S1600-R/Bogger+How+To+Tips.png) no-repeat right top;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&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;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});
});
</script>


- Note: You can change the image url as per your need.

#Step 3. Copy below code and paste it just after the <body> tag.
<div id='pageflip'>
<a href='http://feeds2.feedburner.com/widgetblogger'><img alt='' src='http://2.bp.blogspot.com/_1fRuBdlSpLw/TJcc3k62mWI/AAAAAAAAAps/uSj6nCe_CB4/s1600/page_flip.png'/></a>
<div class='msg_block'></div>
</div>


#Step 4. Save template and done!.

If you need any help please Leave a response.


15 Responses to "How to Add Page Peel / Flip Effect in Blogger using JavaScript and CSS" - Leave a response

  1. LEGENDRY KRISH October 16, 2010 at 8:55 PM
    dude 1st code not working it showing that script tag not closed properly...

    so pls help me and send reply to my mail id
    thanq
    krishna
    krishnlm143.502@gmail.com
  2. Piyush - Admin @ Blogger How To Tips October 17, 2010 at 10:18 AM
    @LEGENDRY KRISH, Now try the code it will work. Actually JavaScript Tag was not closed, it was my mistake. Thanks for updating me regarding this issue :)
  3. Piyush - Admin @ Blogger How To Tips October 30, 2010 at 9:07 PM
    @Ashis, is it giving you any error or what ??
  4. Eva November 8, 2010 at 11:57 AM
    it's not working.. i'll try it later.. thanks for the tutorial :)
  5. Piyush - Admin @ Blogger How To Tips November 21, 2010 at 2:20 PM
    @Eva, what issue you are facing ??
  6. Lucky January 12, 2011 at 9:20 AM
    This is very interesting and helpful trick. Have bright future, Happy blogging :)
  7. Piyush - Admin @ Blogger How To Tips January 15, 2011 at 7:22 PM
    @SRIKANTH, can i have your blog url?
  8. Piyush - Admin @ Blogger How To Tips February 16, 2011 at 10:15 PM
    @sharon_flavia, Replace this (http://feeds2.feedburner.com/widgetblogger) with other URL and it will redirect you to your new location.

Post a Comment

^ Scroll to Top