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
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 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.Labels: Blogger Hack, hacks
