You may have before seen a peel over effect on some
proffessional website and not knew how to get that on your
blog this post will help you get that on your
Blog
you may use it to shoe advts ,
rss feeds or whaterer you want and link it too
Here is the hack to do so..
just follow the steps they are short and sweet
Just login to
Blogger,
Go To Layout > Edit Html > Press Ctrl + F[find]
Now place these 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.astro.wisc.edu/~townsend/resource/news/rss.jpg) 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>
Red line is the image you want to show
Now search for
place the following code after it
<div id='pageflip'>
<a
href='http://feeds2.feedburner.com/widgetblogger'><img alt=''
src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
Thats it enjoyy and any prob tell me through the comment form;)
Special thanks to Anshul dudeja:)
