Rabu, 01 Februari 2012

Cara Membuat Buku Tamu Tersembunyi

Sebenarnya cara membuat buku tamu tersembunyi atau melayang ini sudah banyak blogger yang mempostingnya, tapi karena beberapa waktu yang lalu ada seorang teman yang bertanya pada saya cara membuatnya atau meminta kode scriptnya, maka kali ini saya akan coba menjawab pertanyaannya atau permintaannya lewat postingan ini.
Untuk contohnya, sobat bisa lihat di blog ini.
Gimana? Keren ga?? he..he..

Cara membuatnya:
1.Masuk ke account Blogger sobat, pilih " Rancangan"
2.Tambahkan widget baru dengan mengklik "Tambah Gadget" - "HTML/JavaScript"
3.Tidak usah diberi judul, dan copy kode di bawah ini sebagai konten widget sobat:

<style type="text/css">
#gb{position:fixed; top:50px; z-index:+1000}
* html #gb{position:relative}
.gbtab{height:100px; width:30px; float:left; cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTOBC6vRdeJ3DkF0RqhnFmGio4OXnaMTv0wjD97yeIPrKgNVec9A_2HyPVwd3aQLnMGNKUPjw4o6mVyuqjk9Kb-M7UrVi5DwRmMxQQILlA22qhBCMqeT-3SIZgWPp8NZ4mWxL_N5DtOKZr/') no-repeat}
.gbcontent{float:left; border:2px solid #A5BD51; background:#F5F5F5; padding:10px}
</style>
<script type="text/javascript">
function showHideGB(){var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ?

moveGB(0,30-w):moveGB(20-w,0); gb.opened = !gb.opened}
function moveGB(x0, xf){var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) >10 ? 5:1; var dir = xf>x0 ? 1:-1;

var x = x0+dx * dir; gb.style.right = x.toString()+"px"; if(x0!=xf){setTimeout("moveGB("+x+","+xf+")",10)}
}
</script>
<div id="gb">
<div class="gbtab"onclick="showHideGB()"></div>
<div class="gbcontent">
<!-- Taruh kode buku tamu (shoutbox / shoutmix) disini -->
<div style="text-align:right">
|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString()+"px";
</script></div>

•Posisi buku tamu dengan kode di atas adalah di bagian kanan atas. Kalau sobat mau menempatkannya di kiri, ubah right jadi left. Dan kalau sobat mau menempatkannya di bawah, ubah top jadi bottom,
•Kalau sobat mau mengganti gambar Tab /Tombolnya, sobat bisa mengganti source warna biru / url gambar di atas dengan gambar yang saya siapkan dibawah ini,
•Dan juga jangan lupa untuk mengganti kode <!-- Taruh kode buku tamu (shoutbox / shoutmix) disini --> dengan kode buku tamu sobat.
•Klik "Save" kalau sudah selesai.
•Dibawah ini adalah gambar Tab / Tombol yang bisa anda gunakan.



Semoga berhasil

11 komentar:

  1. mantabs sahabat dan dapat menghemat space, sayapun menggunakannya, salam.

    BalasHapus
  2. Makasih,telah menyertakan gmbar saya,hehehehe

    BalasHapus
  3. walaupun g pertamaxx namun nice post sob, coba saya praktekkan dulu.. :)

    BalasHapus
  4. klo misal saya mau membuat tab/tombolnya hanya kelihatan setengahnya saja trus pada bagian tengah ada link aktifnya yang menuju ke tempat yang saya inginkan tu bagaimana sob, mhon bantuannya... :)

    BalasHapus
  5. Saya pernah bikin, tapi saat menambah script lagi di html buku tamu nya jadi error. akhirnya saya buat di subpage. Terima kasih info ini bang, nanti saya coba buat lagi seperti ini :)

    BalasHapus
  6. mantab gan buku tamunya,beberapa blog saya dulu juga pernah saya pasang buku tamu seperti ini,

    BalasHapus
  7. wah klo' yg nie lbh mntab, jadi gak hrus otak-atik HTML nya.....
    thanks sob

    BalasHapus
  8. kunjungan hari minggu, Bang Rinko. guest book nya susah sekali dibuka :D

    BalasHapus
  9. Ok Bang Neno,memang dua hari belakangan ini halaman Buku Tamu saya ga bisa dibuka via Adhoc,untuk itu demi kenyamanan teman2 semua link nya saya kembalikan ke link semula.

    BalasHapus