Minggu, 17 Januari 2010

Buat Peel Page Di Blog

setelah beberapa hari tak update aku kembali dengan tutorial yangselanjutnya.Baru-baru ni asik entertainment je tibe mase untuk tutoriallak.kat atas tu gambar peel page.ia akan muncul di hujung blogkite.Kalau tak paham ape kate korang buat je.Ia menguntungkan takmerugikan pon.Jom iktui tutorial ini!

sekarang pergi ke Layout > Edit Html >

Dan cari kod ni </head>

dan letakkan kod dibawah diatas kod </head>


<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.wallheaven.com/subscribe.png) 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

$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});


});
</script>



Tukarkan kod merah dengan image anda sendiri jika diperlukan.Sekarang cari kod <body> dan letakkan kod dibawah selepas kod <body>


<div id='pageflip'>
<a href='http://feeds2.feedburner.com/anshuldudeja'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'></div>
</div>


tuakarkan kod yang diwarnakan dengan url anda sendiri jika diperlukan

0 comments:

Posting Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More