A beautiful advertising style- PEEL EFFECT

tttttt
YYY
What is peel effect on the web site?
To know this you should visit one of my web site http://www.adzahav.co.cc/ and move the mouse pointer around the corner of the site where you can see an image as if its hidden behind, and when you click and drag the mouse, you will see a new banner of merosandesh.com. This is the effect, I am going to share with you how did I used it.







This jquery hack was developped by sohtanaka and then naeemnur made it to work in blogger .


Peel effect is a beautiful way to attract your visitors to visit the advertisement. .Its the best place in the blog to advertise which would give maximum amount of ctr to an advertiser.






1.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://merosandesh.com'>
<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, you can promote your own products or skills.

Cheers!


Krishna Thapa

Post a Comment

.