Malam ini saya akan coba memberi tutorial cara membuat EFEK PAGE PELL di atas pada blogger Efek Page Peel adalah Efek seperti lipatan kertas yang ada di pojok kanan atas blog, setiap di sorot oleh mouse akan terbuka lebar..
Mungkin kalian masih bingung , Penasaran dan manfaatnya buat apa ??
Dari pada kalian penasaran coba aja pasang di Blog kalian dan ikuti langkah di bawah :
1. Login / Masuk Blogger
2. Masuk rancangan dan pilih Edit HTML
3. Jangan lupa kasih centang ( Expand Template Widget )
4. kemudian cari code <b:skin><![CDATA[/* dan simpan code di bawah ini di atasnya .
<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. Cari code ]]></b:skin> dan simpan code di bawah ini di atas 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;
}
6. Lalu cari code <body> dan simpan code di bawah ini di atas code <body>
<div id='pageflip'>
<a href='http://cuap-cuapz.blogspot.com/feeds/posts/default?alt=rss>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
7. Save template dan lihat hasilnya..
Keterangan : ganti code yang sudah saya kasih warna merah dengan Url gambar kalian, sesuaikan dengan keinginan kalian masing-masing.
Beres deh cara membuat EFEK PAGE PELL semoga bermanfaat buat kalian.
>
Show
0 Comments
prev
next
