Labels:
SERVICE BLOG
If you often visit my blog, then you aware there is a new thing on the top-right corner of my blog. Now, try to move your mouse over the RSS logo, and you’ll see what happen. The page will peel automatically. This effect called page peel effect. I applied this trick that i’ve got from O-Om.com. According to O-om, this trick is using script made by Sohtanaka.com. And you can see the demo here.The coding is very simple, i think everyone can apply this code to their blog without any problem. I have tried this trick once and succeed.
So, do you want to have this on your blog? Let’s follow the steps.
Step 1:
Put this jQuery script code above this code <b:skin><![CDATA[
<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>
Step 2:<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>
Then put this CSS code above this code ]]></b:skin>
#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://img222.imageshack.us/img222/9213/subscribe.png) no-repeat right top;
}
Step 3: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://img222.imageshack.us/img222/9213/subscribe.png) no-repeat right top;
}
Then put this code under <body> tag
<div id='pageflip'>
<a href='http://feeds2.feedburner.com/yourfeedname>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
Don’t forget to change the code “yourfeedname” in red color with your feed name. Save your work and that’s it. You can see the result on your blog. Remember, you can change the image and link to meet your requirement. Good luck!<a href='http://feeds2.feedburner.com/yourfeedname>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
Source : O-Om.com
0 comments:
Post a Comment