How Make Page Peel Effect Add For Blogger

Peel add effect for blogger,its great way to attract you all blog visitors to something you really wanna show to your readers.Its the best place in the blog to advertise which would give maximum amount of ctr to an advertiser.You would have mostly seen these ads only in wordpress blogs and i first saw that add in johncow blog.Now we can use it in our blogspot blogs also,with the help of javascript as this hack works on jquery and css.

First i would like to thanx sohtanaka for making this jquery hack and then to naeemnur for making it to work in blogger.

As its the best place to advertise there is one more best place to advertise.That is stripe adds for blogger you can install it also,as it is also now available on blogger.And you should also read on for add placement rotator for blogspot blogs.

Now how to install peel add effect in blogger blog.

Just login to Blogger,
Go To Layout > Edit Html > Press Ctrl + F

Now search for </head>

And place the below codes above it.

<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://www.wallheaven.com/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>

In codes red line is the image url you wanna show in add,so make change according to your requirements.

Now search for <body> tag and place the below code after it.

<div id=’pageflip’>
<a href=’http://feeds2.feedburner.com/anshuldudeja’><img alt=” src=’http://www.wallheaven.com/page_flip.png’/></a>
<div class=’msg_block’></div>
</div>

In above codes two lines in red are url,One to link to advertisement and one to the image which peel over the advertisement.I hope you will love this hack and will add one more place to to advertise,if you don’t get any any advertiser,at least you can use your subscribe button there as i have set in codes.

35 Comments

  1. jayaraj,chinna June 20, 2009
  2. Sambit June 20, 2009
  3. Anshul June 20, 2009
  4. SEO Services June 22, 2009
  5. Googy June 24, 2009
  6. kophyonyein June 24, 2009
  7. Anonymous June 27, 2009
  8. Anshul June 27, 2009
  9. Anonymous June 28, 2009
  10. Anshul June 28, 2009
  11. Sandeep July 1, 2009
  12. Anshul July 1, 2009
  13. Sandeep July 1, 2009
  14. Anshul July 3, 2009
  15. Hassan July 24, 2009
  16. Anshul July 26, 2009
  17. Kanishka Kashyap August 18, 2009
  18. Edgar August 18, 2009
  19. Anshul August 18, 2009
  20. Edgar August 18, 2009
  21. Edgar August 18, 2009
  22. allsimplefx August 20, 2009
  23. Anshul August 21, 2009
  24. Lucky Flaush September 7, 2009
  25. Anshul September 8, 2009
  26. Computer Enginners November 7, 2009
  27. The Rebels Yell! November 27, 2009
  28. Anshul November 27, 2009
  29. Hai Le December 17, 2009
  30. Phillip Cardon December 24, 2009
  31. Anshul December 24, 2009
  32. Yuvanesh January 9, 2010
  33. Anshul January 9, 2010
  34. ice_heart June 26, 2010

Leave a Reply