SharedTutor | Tutorials For Everyone

Find your interesting tutorials in Get your tutorial about Computer, Blogging, Makemoneyonline, Games, Design, and more!

How to Add Cool Page Peel Effect

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='' type='text/javascript'/>

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

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

/* Page Flip
----------------------------------------------- */
position: relative;
right: 0;
top: 0px; /* Change to 30px if you have the navbar (navigation bar) */
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( no-repeat right top;

position: static;
right: 0;
top: 0;
float: right;

Paste the code seen below after <body>

<div id='pageflip'>
<a href=''>
<img src='' 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; '/>

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.

No comments

Post a Comment