How to Add Page Peel Effect in Blogger

Sometime you can see some blogs at the top corner when you can move cursor to that flipped page that corner flipped page animate and you can see the notes behind that. Most of people understand that this effect is make by any flash content but its not true. You can also put that type of effect in your blogger. In this post you can see how to add that type of animated content in your blog.
Instruction to Install
Step 1: Log into your blogger.com account.
Step 2: Open your blog in which you want to intall this page peel effect.
Step 3: Go to template and click on Edit HTML.
Step 4: Now search for </head>. For this purpose Press CTRL+F  , type </head> and press Enter. Put this code before </head> tag.

<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://3.bp.blogspot.com/-IfvJKcSYc8A/T5fOcTMgD7I/AAAAAAAAAKU/AcrhSGkFL80/s1600/subscribe.png) 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>

Step 5: Now put code in body for display page peel effect for that press Ctrl+F , type <header> and press Enter. Put this code above / before <header> tag. OR put this code just below </head>.

<div id='pageflip'>
<a href='http://feeds2.feedburner.com/IACtips'><img alt='' src='http://4.bp.blogspot.com/-cQuWhOWI6hk/T5fObdQZf4I/AAAAAAAAAKM/cFuYjQk1yPk/s1600/page_flip.png'/></a>
<div class='msg_block'></div>
</div>

Replace YOUR FEED URL with your original feed url and then paste that code.


If you have any confusion , comment here.

Share it Please

Tweet

Unknown

I am a student of computer science.Owner of IAC Tips blog. I love to share my knowledge and experience with others. Follow my blog for tips tricks of internet, computer and software.