Breaking News
Loading...

Cara Membuat Halaman Blog Melipat



Trik blogger kali ini share tentang cara membuat halaman blog melipat,dan uniknya bila kursor mouse berada dipojok halaman maka halaman tersebut akan melipat seperti contoh pada blog ini.

Pada Lipatan halaman ini bisa dipasang RSS FEED atau apa saja yang sobat ingin pasang di dalam lipatan ini.
Untuk membuat halaman blog seperti ini caranya sangat mudah, sobat penasaran mau membuatnya?

Mari ikuti langkah2 berikut:

1.     Login ke blogger >> Design >> Edit HTML >> Expand widget template

2.     Cari kode <b:skin><![CDATA[

Dan letakkan kode berikut di atasnya:
<script src='http://trikblogger.googlecode.com/files/script_lipat_halaman_trikblogger.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>
3.     Lalu cari lagi kode ]]></b:skin>

Dan letakkan kode berikut tepat di atasnya:
#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://lh5.ggpht.com/_RVpTV2JOOxA/S8iu18jZiCI/AAAAAAAACyo/e0oaiHtbMf0/berlangganan_kelipat.png) no-repeat right top;
text-indent: -9999px;
}
4.     Cari kode <body>

Dan letakkan kode berikut di bawahnya:
<div id='pageflip'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=TrikBlogger' target='_blank'>
<img alt='' src='http://lh3.ggpht.com/_RVpTV2JOOxA/S8iu2CHC7SI/AAAAAAAACys/nYe088a8tkc/gambar_kelipat.png'/>
<span class='msg_block'/>
</a>
</div>
Catatan ganti kode yang berwarna merah dengan Link yang anda inginkan. Saran saya Link RSS atau
link berlangganan

5.     Kemudian simpan template sobat

Untuk mengganti gambar background URL yang berwarna merah, sobat bisa mengganti dengan URL gambar yang sobat inginkan

Selesai sudah cara membuat halaman blog melipat dan lihat hasilnya bagaimana....baguskan?
Selamat mencoba

Sumber dari http://t4belajarblogger.blogspot.com

6 komentar:

  1. KK,, tolong dong minta bantuannya...!!

    kalau di besarin lipatannya bisa gak ???

    BalasHapus
  2. @ AdamAprianto : Pastinya bisa gan, coba anda atur height dan width scriptnya :-)

    BalasHapus
  3. kk...mw tanya.. untuk backgroundnya kalo pengen kita ubah gambar buatan kita sendiri gmn yaaa

    BalasHapus
  4. @ the electronic goods: bisa gan, anda harus mempublikasikan gambar anda ke internet bisa lewat postingan blog.
    publish gambar anda dari postingan blog lalu ambil script gambar anda masukkan ke coding tutorial yang di atas.

    BalasHapus
  5. Maksudnya page berlipat apa Om ? Boleh nanya gak gimana caranya bikin cuplikan artikel pake widget.

    BalasHapus
  6. @Ikram : Maksudnya bila kursor mouse berada dipojok halaman maka halaman tersebut akan melipat / membuka dan bisanya ada gambar background/logo yang disisipkan.

    BalasHapus

Terima kasih sudah mau berkunjung ke Blog sederhana ini, Tidak ada salahnya untuk memberikan komentar untuk kemajuan blog ini.
Catatan komentar yang tidak ditampilkan :
1. Komentar SPAM
2. Komentar tidak bermutu / tidak nyambung.
3. Memasukan Link ke dalam kotak komentar blog.

 
Toggle Footer