How to add page flip style in blogspot/blogger. ~ Blogger Tips And Tools |Latest Blogger Tricks| SEO Tips

You might have seen the page flip effect on many professional websites and blogs. Today we will see how you can add page peel / flip effect in blogger using little bit of JavaScript and CSS.

This post will help you to get the same effect on your Blog which cane be used to display any advertisements, RSS feeds or whatever you want and link it too.

Follow simple step to add this peel effect to your blogger blog........

* First go to blogger dashboard.

* Now click design tab and edit html .

* After above step click box to expand template.

* Now find </head> Tag with ctrl+f Key and copy below code paste 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/AVvXsEgMBmTvudOroj1wq0K-vgnySlRxhXEVUFQMcNE27E9T1ltla92pkkAwZyQdPp0o4VDD4-SBwuzHmLpoHGCLESKPy6U7tth9CG1UV_0TGjUL6DIJu5HgVIormoBl-CDExoeYVLLYZaAGnRPV/s1600-r/Bogger+How+To+Tips.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>

* Now find again <body> and copy below code paste before it now.

<div id='pageflip'>
<a href='http://feeds2.feedburner.com/blogger9'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdaST7iIT-kqe_9iV5O1ITF7H1rijQ7PTTCU1G-qLce-3rj_DErvbAujq-DEbH-yYRpoaAefQLKKtyjsOL6DNj9_IsNL8d2Xa1v5OOn3PKGhcCwcp3Wcqx_lN0x6j4Gr1Zh2BlcDG9A79l/s1600/page_flip.png'/></a>
<div class='msg_block'></div>
</div>

* Now save your template and you are done my friend.