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.
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/WindowsVistaXpTipsTricksHack'><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.
