rss

Thursday, July 30, 2009

Peel over page effect Hack Blogger



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:)
Stumble Delicious Technorati Twitter Facebook
If you enjoyed this post, make sure you subscribe as an Reader!

1 comments:

Anonymous said...

This is awsome ! Thanks for this hack. Will try this first


Post a Comment

← Newer Post Older Post → Home
 

Recent Posts

Recent Comments

Follow Me

UseAds.com - Advertise your site at UseAds.com! Submit your site and get tons of traffic!
UseAds.com - Advertise your site at UseAds.com! Submit your site and get tons of traffic!