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]
</head>
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
<body>
place the following code after it
<div id='pageflip'>
<a
href='http://feeds2.feedburner.com/btips'><img alt=''
src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
Post a Comment