12 April 2011

How to add Page peel or Page flip effect to Blogger blog?

Advertisements

The page peel/flip effect hides the content and reveals it when mouse pointer is hovered there. This effect is present on most of the websites. Today we will learn to add this page flip effect to your blog.


Live Demo

Adding Page Flip Effect

1. Go to Blogger dashboard > Design > Edit HTML and add following code BEFORE </head>

<style type="text/css">
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
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(http://2.bp.blogspot.com/-Mgvlxgte0K0/TaP-xHz_eZI/AAAAAAAAAD0/KCSlfGMeUe4/s1600/page+peel.JPG) no-repeat right top;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});
});
</script>

Edit image URL with your own.

2. Add following code AFTER <body>

<div id='pageflip'>
<a href='http://film-cast.blogspot.com'><img alt='' src='http://2.bp.blogspot.com/_1fRuBdlSpLw/TJcc3k62mWI/AAAAAAAAAps/uSj6nCe_CB4/s1600/page_flip.png'/></a>
<div class='msg_block'></div>
</div>

Change the refferance URL with your own.

Finally save your template.

Related Posts

9 comments

April 14, 2011 at 10:51 AM

I don't exactly know how to ask, but i am searching to find how to get the full image size when mouse pointer is hovered on the thumbnail of a image.I am using photo bucket for photos hosting.

April 15, 2011 at 1:45 AM

Please refer to:
http://jquerybyexample.blogspot.com/2011/02/how-to-zoom-image-on-mouse-over-using.html

April 15, 2011 at 1:25 PM

Thanks for the info,got the code.
And how can i place the images continuously,
After uploading images in the blog i only can place three images in a row i.e left,center and right.I need to place six small images in a single row,but i cant place them.I tried dragging the image to a single row but the images are automatically moving down.I don't know the basic HTML coding also.

April 15, 2011 at 1:35 PM

i placed a favicon in my blog it is only showing in homepage and the remaining pages shows the default favicon icon.Could you please explain it.
Thanks.

April 16, 2011 at 12:21 AM

Use this code

<div style="width:240px;"><img src="image" /><img src="other_image" /></div>

April 16, 2011 at 12:23 AM

For favicon, read

http://www.blogger-help.com/2009/01/get-your-missing-replaced-favicon-back.html

April 16, 2011 at 8:37 AM

Hey i followed exactly the code but i got it one by one,as shown in this link
http://2kavs.blogspot.com/2011/04/checking.html.
check it and correct me.

Mohammad
July 11, 2011 at 2:09 AM

awesome !!! works great thx so much

January 26, 2012 at 5:49 AM

Fantastic share man! Keep them coming... :)

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More