Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How to Add Cool Page Peel Effect

How to Add Cool Page Peel Effect

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

910 views

One of the coolest features to have on your site is the popular Page Peel effect. The effect mimics the flipping pages of a book the makes the site more interesting to view. There are many methods to do this but here is a simple way which you can follow even if you’re just a beginner.

The tutorial is from Ataul Ghani, who shows you how to create the page peel effect using jQuery and we will be featuring it here. By using jQuery, you can customize it if you feel to tweak the effect.

Below are the steps:

  • Login to your Blogger
  • Blogger Dashboard > Template > Edit HTML
  • In Edit HTML, search for </head> and behind it, copy and paste this code provided by Ataul:

 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

<script>
<pre> //<![CDATA[
 $(document).ready(function(){
 $("#pageflip").hover(function() {
 $("#pageflip img , .msg_block").stop()
 .animate({
 width: '307px',
 height: '319px'
 }, 500);
 } , function() {
 $("#pageflip img").stop()
 .animate({
 width: '50px',
 height: '52px'
 }, 220);
 $(".msg_block").stop()
 .animate({
 width: '50px',
 height: '50px'
 }, 200);
 });
 });
 //]]>
 </script>

And before ]]></b:skin>, add this code:

/* Page Flip
 ----------------------------------------------- */
 #pageflip {
 position: relative;
 right: 0;
 top: 0px; /* Change to 30px if you have the navbar (navigation bar) */
 float: right;
 z-index:9;
 }
 #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://oi44.tinypic.com/2hheno6.jpg) no-repeat right top;
 }
 #pageflipMirror {
 position: static;
 right: 0;
 top: 0;
 float: right;
 }

Paste the code seen below after <body>

<div id='pageflip'>
 <a href='http://name-of_your_blog.blogspot.com/atom.xml'>
 <img src='http://oi40.tinypic.com/10fqnav.jpg' style='width: 50px; height: 52px; overflow-x: hidden; overflow-y: hidden;'/></a>
 <div class='msg_block' style='width: 50px; height: 50px; overflow-x: hidden; overflow-y: hidden; '/>
 </div>

6. Save.

Note: Before customizing your template, make it sure to have it backup.

Hope Ataul’s steps help you in making your site more appealing to the readers.

Liked It ? Please Share

Comments

6 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. EARN MONEY says:

    very good site for, thanks to administrator of this site.

  2. Swapnil says:

    Shows this error “Error parsing XML, line 1051, column 4: The element type “pre” must be terminated by the matching end-tag “”.”

  3. Debarpan says:

    Thanks for this,just worked like a charm.

  4. Neha says:

    Nice, Thanks for this is very good

  5. OBAT KANKER says:

    TERIMAKASIH ATAS INFONYA SEMOGA BERMANFAAT….

  6. Zohaib Jahan says:

    dear, all your post pictures aren’t showing… update them kindly
    anyhow, great effort.
    regards: http://zohaibjahan.blogspot.com

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here