Comments on: Simple Page Peel Effect for Blogger

By: srinivas

srinivas — Fri, 29 Jul 2011 12:38:20 +0000

this is not an image link!
http://www.wallheaven.com/page_flip.png

the wallheaven.com is opening when clicking on this link

http://indiarockz.co.cc

By: apachesumbawa

apachesumbawa — Fri, 22 Jul 2011 15:09:22 +0000

Thx alot on your intelligence to make things interesting in the blog template design

By: Georgian Benta

Georgian Benta — Sun, 05 Dec 2010 22:04:50 +0000

Thank you very much!

There are some issues on my site but the code itself is great! :)

By: Photo blogger

Photo blogger — Fri, 03 Dec 2010 07:02:29 +0000

Hi,your demo is not working properly.I closed browser and checked again still same issues.I want to implement this to my new bloggers blog.Can you please HELP

By: Website Rank

Website Rank — Tue, 07 Sep 2010 08:46:20 +0000

Great post.. thanks

By: Ebin

Ebin — Wed, 09 Jun 2010 12:54:15 +0000

Hi Bro,
It is not working for me.I used IE8 and the code is given below.Please advice what is wrong?

Untitled Page

img { behavior: url(iepngfix.htc) }
#pageflip {
position: absolute;
right: 0; top: 15px;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 15px;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 15px;

background: url(image/subscribe.png) no-repeat right top;
}

$(document).ready(function(){

//Page Flip on hover

$("#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);
});

});

By: Lorenz

Lorenz — Mon, 10 May 2010 11:42:33 +0000

Thank you very much for the tutorial, works great! It might be worth mentioning that that RSS feed url has to be replaced, else everyone gets redirected to your blog ;) Also, if you are using blogger you will have a 15px blogger navigation bar on top.

If you want the animation to start below, you have to indicate that in the code. Furthermore, I had to change an attribute to “absolute”. It works fine with me now, I copied that part of the code below in case anyone needs it:

#pageflip {
position: absolute;
right: 0; top: 15px;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 15px;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 15px;
background: url(http://www.wallheaven.com/subscribe.png) no-repeat right top;

By: Hamburg

Hamburg — Sat, 01 May 2010 23:03:16 +0000

Thanks a lot for great Plugin!

it works!

By: John!

John! — Sat, 23 Jan 2010 00:47:50 +0000

Thanks you so much! Your blog too!
.-= John!´s last blog ..Traduce tu blog con el Widget de Bing =-.

By: Simjith

Simjith — Thu, 14 Jan 2010 08:53:28 +0000

Thanks a lot

I have added this snippet to my site site and its working.

Simjith
.-= Simjith´s last blog ..Hide Unread Email Messages Notification on XP Logon Welcome Screen =-.