ADVERTISEMENTS
Hi, friends, in this post, I am gonna teach you how to implement the page peel effect in your blogs. This increases the number of visitors to your blog. This is the best place for advertising. Hope you like it.You have probably seen these forms of advertisings where you can peel a corner of a website and see a message underneath. This is done using some simple lines of jQuery.This was origianlly done by Sohtanaka
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/wonderful-tricks'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
Note: Change the feed link above which is in red to your own feeds.
[Source]
0 comments