Plend kita ketemu lagi nie, kali ini saya akan menjelaskan tentang Page Peel Efek menggunakan JQuary Dan CSS, ga ngerti ya 
ituloh yang ada di PKS (pojok kanan atas) di blog w, sekarang dah taukan...pasti mau yaAaAa.... okay langsung aja ke caranya :
1. sign in ke blogger plend2. klik tata letak
3. klik edit HTML contreng kotak kecil di samping Expand
4. cari kode ini <b:skin><![CDATA[ lalu copy paste code dibawah ini tepat di atas kode tersebut
<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>
5. Kemudian letakan kode CSS dibawah ini tepat di atas kode ]]></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;
}
6. Lalu letakkan kode di bawah ini tepat di bawah kode <body>
<div id='pageflip'>
<a href='http://feeds2.feedburner.com/namafeedPlend'>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
7. Skarang klik pratinjau dan lihat hasilnya kalo dah puas simpan template deh
warning : Kode berwarna hijau di ganti dengan nama feed plend okey coy
sekarang saatnya Nidji holic pergi dulu ya 
warning : Kode berwarna hijau di ganti dengan nama feed plend okey coy
sekarang saatnya Nidji holic pergi dulu ya 
.jpg)
0 komentar:
Posting Komentar