Pages

Senin, 30 Mei 2011

Membuat Ujung Kanan Atas Halaman Blog dapat Melipat || Page Peel Effect

Hallo sobat blogger..
Mau sharing lagi nih,bagi-bagi pengalaman waktu blogwalking ke Blog tetangga,saya menemukan halaman yang ujung atasnya dapat melipat..hhmmm

Masih bingung??
Itu looh sobat blogger,contoh nya ada diblog ini kok.. Tepatnya ada dikanan atas bagian dari blog ini..



 
Gmna?? Udah tau kan??
Kalau udah tau,mau tau gak cara memasangnya dihalaman blog kita..??
Gini sobat caranya..
  1. Masuk kedalam akun sobat masing--masing.
  2. Pilih Rancangan dan Edit HTML.
  3. Centang kotak kecil (Expand Widget Template).
  4. Cari kode
<b:skin><![CDATA[

     5.   Setelah dapat,copy/paste script dibawah ini tepat diatas kode diatas.
<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> 

   6.   Lalu cari lagi kode
  ]]></b:skin>
   7.   Copy/paste kode dibawah ini tepat diatas kode yang telah kita cari pada kali ini.

#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGpBCWTrYPiqKJV2FI4zEseDkU_nj2kSn_mESvt5Fy1rWIwv7zbGjullQvR2iAZs7EHh3ttMO9eeO_5_0Zr7Mg-RZrHRS2TUER7s2IxoQmt4fF_bzkM5VJFNfEExLcoYFFHjobmLnqGue_/) no-repeat right top;
text-indent: -9999px;
}
   8.   Dan yang terakhir cari kode <body>
   9.   Lalu letakkan kode berikut dibawahnya.
<div id='pageflip'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=autisworld' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoVG6hvqWpDG2YzBUyoweTWX8bvT-Joc4JKhm_5vzzsVvifzSp4OxDjlpO3PRIN2i-rOXqxzFc6iseFSdRgEw5xVKUKI2uGwxO5ycWlwzralfNFGaj9hfKvuDi5D8k4n4FiKSgwZQJr1go/'/>
<span class='msg_block'/>
</a>
</div>

Simpan dan lihat hasilnya..hheehe
Kalau sobat blogger ingin mengganti gambar flipnya,tinggal ganti tulisan yang berwana biru diatas,dan jika ingin mengganti tujuan URL,ganti tulisan yang berwarna hijau dengan link sobat.

Sekian info dari saya,kalau berkenan untuk sharing tentang postingan ini,mohon sertakan pula sember dari hasil share sobat. Terima Kasih.
Selamat mencoba,,

Tidak ada komentar:

Posting Komentar