How to Add Cool Page Peel Effect

http://videohive.net/?ref=gimmegfx



This image does not have any alt text

One with the coolest features to own on your internet site is the popular Page Peel effect. The effect mimics the flipping pages of a book the makes all the site more interesting to see. There are many methods to do this but here's a simple way that you can follow even if you’re merely a beginner.

The tutorial is produced by Ataul Ghani, who helps guide you to create the page peel effect using jQuery and we will be featuring it here. By using jQuery, it is possible to customize it if you believe to tweak the effect.

Below are the steps:


  • Login to your Blogger



  • Blogger Dashboard > Template > Edit HTML



  • In Edit HTML, seek out </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, ensure it is sure to possess it backup.

Hope Ataul’s steps assist you in making your web site more appealing on the readers.




Title Post: How to Add Cool Page Peel Effect
Rating: 100% based on 99998 ratings. 5 user reviews.
Author: SharedTutor

Thank you for visiting sharedtutor.com, If there is criticism and suggestions please leave a comment


thumbnail
About The Author

Someone who always wanted to know about the beauty of the world :)

0 comments