Rabu, 16 Desember 2009

How to Create A Page Peel Effect?

Hi bro, i feel all of you have knwn what the function of page peel effct. with page peel effect We can decorate our blog, you can see it in my blog too... look at top right side in this blog, yas you r right it seemly like following preview



too create it we just need for simple steps

login to your blogger account >> clck Layout option >> click Edit HTML and than put following code before/above tag <b:skin><![CDATA[


<script src='http://sites.google.com/site/software2iqbalinc/javascript/script_ditunjuk_ngelipet_t4belajarblogger.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#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>




n than put following code before/above tag ]]></b:skin>

#pageflip {
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://software2iqbal.files.wordpress.com/2009/11/berlangganan_kelipat.png) no-repeat right top;
text-indent: -9999px;
}




n then the last step...put following code after tag <body>


<div id='pageflip'>
<a href='http://feeds.feedburner.com/TutorialBlogDiBloggerBelajarMembuatBlogNgeblogUntukPemulaDanLanjutan' target='_blank'>
<img alt='' src='http://software2iqbal.files.wordpress.com/2009/11/gambar_kelipat.png'/>
<span class='msg_block'/>
</a>
</div>




FINISH...now you can view your blog changes, how easy n simple bro...


u can replace my FeedBurner Link with your Own URL, what URL can i put? Up to you, but i suggest to you to replace it with your Feed URL like Rss or Atom, this just my advice...yahaaa GoOd LuCk

Source: Sohtanaka.com

Tags: Create page peel effect for Blogger, page peel effect for your blog, how to create page peel effect, page peel effect with jQuery