How to Add Cool Page Peel Effect

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...



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.



COMMENTS

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

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

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

Name

blogging,255,computing,705,ebook,53,ebooks,354,freebies,358,graphics,225,IFTTT,3,internet,207,mobile,252,news,99,sharedtutor,78,slider,2,video tutorials,5,VideoHive,1156,YouTube,1005,
ltr
item
SharedTutor Tutorials For Everyone: How to Add Cool Page Peel Effect
How to Add Cool Page Peel Effect
http://www.infogenra.com/wp-content/uploads//2011/09/blogger_logo.jpeg
SharedTutor Tutorials For Everyone
http://www.sharedtutor.com/2013/10/how-to-add-cool-page-peel-effect.html
http://www.sharedtutor.com/
http://www.sharedtutor.com/
http://www.sharedtutor.com/2013/10/how-to-add-cool-page-peel-effect.html
true
1970043136941886328
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy