Spice Up Your Blogger Blog with Custom Designed Templates - BTNT Services!

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

On By // 4 comments
Advertisement
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.

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSjvT-Fcpo1so7lA-9LQIomGuZczEHOQ7ejGpGDMBRK4ZI3riXv5xCYfAaD5dTAzUxrTLrthO2feJ9rOaRAlUQdB5jB8kbydDFGu7qxV89dI1ctDfMH3MuJ_1L8VhjwuW7PQYE2GngB-Td/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFwCirrf-l6oeTqpe9h7JlLBKRPOQkYxwatdyF79LHDzZFxi4OE47TwRcIPcJnGPYCHmsWK_lLoPW9unQFYmxuhLUtkIbNKP9h7WmnliQ9BvKuL5RSxzYoyKBli9R2xM7yWEufMQ5LugJq/s1600/page_flip.png'/></a>
<div class='msg_block'></div>
</div>

Change the refferance URL with your own.

Finally save your template.

4 comments:

  1. cant find < body > !!

    ReplyDelete
    Replies
    1. There is no way. I mean definitely you can find it because every theme must have <body>

      you can also CTRL+F for fast searching. :)

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. a really good post i was looking for it

    ReplyDelete

I Appreciate your valuable Feedback. So, Please DO NOT SPAM - Spam comments will be deleted immediately.

Don't use brand name in name field and you're not allowed to use links in comments unless it's necessary

Such Comments will be removed immediately.

Thanks,
Chandeep