Peel over page effect Hack Blogger

Monday, June 22, 2009

Peel over page effect Hack Blogger

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:)