Page peel effect using jQuery

A cover page is a popular page-turning effect that shows "what's behind" as you hover over it, as if it were a book. There are many ways to do this, many of them use Flash files which makes them less customizable, but the method we will see in this article is done using jQuery.

The "background" content is usually the feed subscription image, but you can post any image and link to any page.

proof

You can see an example in this demo blog.

How to add page scroll effect in Blogger

1. Log in to your Blogger dashboard , select your blog > Template > Edit HTML

2. Click anywhere in the code area and press CTRL + F to find the following label:

3. Just before Copy and paste this script:

4. Then before ]]> (Ctrl + F to search - click left arrow if needed) Paste these styles:

/ * turn the page
-------------------------------------------------- - */
# picture {
position: relative;
right: 0;
top: 0px; /* move to 30px if navbar */
Swim to the right
Z-index: 9;
}
#pageflip image {
width: 50px;
height: 52px;
Z-index: 99;
Position: Absolute.
right: 0;
high: 0;
- ms interpolation mode: bicube;
}
#pageflip .msg_block {
width: 50px;
height: 50px;
hidden tide
Position: Absolute.
right: 0;
high: 0;
Background: URL ( http://oi44.tinypic.com/2hheno6.jpg ) no duplicate top right;
}
#pageflipmirror {
Position: fixed.
right: 0;
high: 0;
Swim to the right
}

5. Paste after completion Or if you can't find it, with this code:

The following code:

- You will see a blue URL - in this case the image URL is an invitation to subscribe to the channel. You can change it later (it should be the same size).
- You need to replace the red colored url with your blog's URL, when the user clicks on the image behind it, it will link to the blog feed, but if you want to link to another page, you can put any url you want.

6. And that's it. Click the Save Form button to save changes.
Note that this page sanitizing effect uses jQuery, so there should only be one version, and if you're using Scriptaculous or Mootools, you'll need to make some changes.