How To Add Stylish Page Peel Effect

This tutorial is about how to make page peel effect to your blog.It is very stylish and cool looking effect another benefit of it, is that you can use this effect for stylish advertisement it is very easy to make it just follow the easy and simple few steps and make it.Step 1

Step 2

Now press CTRL +F to find the following code.

]]></b:skin>

Step 3

Copy the following code and paste it before this code that you have already found.


#pageflip {
position: relative;
}
#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;
position: absolute;
z-index: 50;
right: 0; top: 0;
background: url(http://2.bp.blogspot.com/-UMf_Intus9I/TnxHqFxtiPI/AAAAAAAAARk/J68DTnrb3Ac/s1600/REGFR.png) no-repeat right top;
text-indent: -9999px;
}

Step 4

Now find the following code.

</head>

Step 5

Copy the following code and paste it before this code that you have already found.


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">// <![CDATA[
<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 6

Now find the following code.

<body>

Step 7

Copy the following code and paste it after this code that you have already found.

<div id='pageflip'>
<a href='http://feeds.feedburner.com/AmaziBox'>
 <img alt='' src='http://1.bp.blogspot.com/-iYfAggO38h0/TnxHq83P5DI/AAAAAAAAARo/KLF-skSux_Y/s1600/page_flip.png '/>
 <span class='msg_block'>Subscribe via RSS</span>
</a>
</div>