Pasang Buku Tamu Tersembunyi Di Blogger

Kali ini saya akan menuliskan bagaimana cara pasang buku tamu di blogger, namun pada artikel ini saya akan menuliskan tutorial cara pasang buku tamu Tersembunyi / Hidden.

Buku tamu merupakan salah satu hal yang tidak wajib ada di blog kita, namun buku tamu bisa mempercantik blog kita. Selain itu pengunjung blog kita bisa dengan mudah menyapa kita sebagai admin (atau pengunjung lainnya), walau cuma sebatas kalimat (mampir gan, malam, kunjungi blog saya juga ya, dsb...)

Buku tamu tersembunyi juga baru saya pasang di sidebar blog ini. Setelah niat untuk pasang buku tamu tersembunyi di blog ini akhirnya timbullah niat untuk menuliskan bagaimana cara memasang buku tamu tersembunyi di sidebar blogger.
Cara Pasang Buku Tamu Tersembunyi Di Blogger
Ok ga perlu panjang lebar, langsung saja ke topik utama kita.

Panduan Cara Pasang Buku Tamu Tersembunyi Di Sidebar Blogger

Pertama-tama silakan buat akun di www.cbox.ws atau di situs penyedia script buku tamu gratis yang teman suka.

Kemudian ambil script yang sudah di sediakan (kopi kodenya).

Sekarang mari kita ke blogger. Jika belum login silakan login dulu. Jika sudah login silakan klik Rancangan/Design/Tata Letak dan Klik Tambah Gadget/Add Gadget. Jika masih bingung bagaimana cara pasang di blogger silakan baca : Panduan Cara Menghias Blog Blogger

Pilih html/javascript dan silakan paste kode di bawah ini

<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/AVvXsEhTnKwg-5YdGY67lbO_7Rp-KWCDqmJHbLCA4DEriPDT4o-_O7O8Q0OxH2EDeXQ771EckRo4l8iR57_qrTEblloppvFhuqDIBUd8Qj8WEYqGTBvYbDjs-JODRqhUIRim_nLfBysvuZL6LrA/s1600/bukutamu.png') 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">
Silakan Paste Kode Buku Tamu yang sudah di kopi tadi Di Sini

<div style="text-align:right">
<a href="http://blog.ahmadrifai.net/2011/06/pasang-buku-tamu-tersembunyi-di-blogger.html">[Pasang Ini Juga]</a>><a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
Bagi teman-teman yang faham bahasa css atau html silahkan di atur sendiri tampilannya sesuai selera, jika sudah selesai silakan di Simpan dan Selesai

Update  13 Agustus 2012 Harap Dibaca !

Bagaimana cara mendapatkan script buku tamu, agar lebih jelas silakan baca Cara Mendapatkan Script Buku Tamu Di Cbox.ws

48 comments:

  1. Thanks masterrr ahirnya berhasil juga

    ReplyDelete
  2. siiip thanks bos atas infonya..

    ReplyDelete
  3. Mantap infonya, Trim's. Langsung ke TKP

    ReplyDelete
  4. Paste kode di atas dibagian mana ya om? *masih bingung nee:) Tq

    ReplyDelete
  5. Ow, sudah ketemu, tambah gadget ya.. ta kirain di Edit HTML.. hehehe. Tq

    ReplyDelete
  6. makasih bro artikelnya sangat membantu sekali :D

    ReplyDelete
  7. terimakasih gan mantab infonya bagi blogger pemula seperti saya, salam kenal dan salam sukses yah

    ReplyDelete
  8. gan gmana siih pasang kode HTML gwe gx prnah berhasil,,,


    by#blogger katro,,

    ReplyDelete
  9. GUYS PASSWORD DI PENGISIAN CBOX CARANE GIMANA? KOK SALAH TERUS SII. TOLONG JAWAB YAA

    ReplyDelete
  10. @Naya Hana udah daftar belum di sana, kalo belum silakan daftar dulu (gratis kok). mungkin mba belum punya akun di sana, jadi ga bisa login.

    ReplyDelete
  11. ah,, gak jelas nieh,,
    Bagian "Silakan Paste Kode Buku Tamu yang sudah di kopi tadi Di Sini" maksudnya gimana..??
    Jelasin gan,,

    ReplyDelete
  12. @kadek ari wibawa Langkah pertama udah dilakukan belum? (1. buat akun di www.cbox.ws)

    Nah kalo udah daftar di sana silakan ambil kode html (untuk menampilkan bukutamu) yg disediakan disana.

    Setelah itu kopi dan paste pada "Silakan Paste Kode Buku Tamu yang sudah di kopi tadi Di Sini"

    ReplyDelete
  13. ini artikel sangat membantu saya gan... :)
    coba dulu gan.
    emang buku tamu penting :D

    ReplyDelete
  14. duh, kenapa hanya caranya doank?
    napa gak langsung teredit secara otomatis?

    ReplyDelete
  15. gan th ngmbil kode na di bagian mananya si?

    ReplyDelete
  16. saya udah daftar tapi bingung
    cari codenya dimana gan???
    mohon pencerahan nya!!!

    ReplyDelete
  17. @devastzr.blogspot.com Nanti akan saya tuliskan cara ngambil kodenya, tapi mohon sabar ya

    ReplyDelete
  18. mas, sign up password sama Cbox namenya ga match terus gimana nih?

    ReplyDelete
  19. udah succes gan......thanks yua....................???????????

    ReplyDelete
  20. kode buku tamu tersembunyi nya apa si?? aku minta dong

    ReplyDelete
  21. Untuk yang belum paham aq share pengalamanq y .........

    pertama copy code HTML yang paling atas
    Lalu Masukin Juga code dari Cboxnya
    yang terakhir masukin juga kode yang paling akhir, sekian deh


    Terima Kasih, d tunggu teman2 untuk kunjungan balik.ok

    ReplyDelete
  22. Salam blogger, makasih infonya sangat bermanfaat bagi saya selaku blogger pemula

    ReplyDelete
  23. wah mantab nih gan,,saya coba berhasil

    ReplyDelete
  24. makasih mas.. udah dicoba di blogku

    ReplyDelete
  25. ini kayak punyaku, tapi punyaku tak perlu klik di dekatin mouse aja sudah terbuka, dan cara pembuatannya sama seperti ini

    ReplyDelete
  26. aku udah mendaftar.. tapi aku ngga dapat - dapat juga kode buku tamunya ?? bagaimana ini bisa dibantu ?

    ReplyDelete
  27. @Mia Erhiszkya Setelah daftar di www.cbox.ws silakan konfirmasi (jika diminta) kemudian login di situs tersebut. Nah di sana nanti ada kode script buku tamu yang bisa kita gunakan. Jadi harus login dulu baru scriptnya bisa kita ambil

    ReplyDelete
  28. gan klo mau pindah ke kiri bisa gx..?

    ReplyDelete
  29. hsilnya bagus... boleh copas bang..?

    ReplyDelete
  30. kak...ada animasi orang joget di blog tak...???

    ReplyDelete
  31. wah.. mantep nih gan..
    makasih tutornya..
    salam.. :)

    ReplyDelete
  32. membantu bnget kang,,,
    mkcih info,,,
    ijin copas kang,,,,

    ReplyDelete
  33. saya udah copy kode yang di atas d.tambah gadget trus udah ganti tulisan: 'Silakan Paste Kode Buku Tamu Yang sudah di kopi Tadi Di Sini' dengan kode yg saya dapet dari www.cbox.ws, tapi ko buku tamunya engga jadi,
    tolong kasih tau kesalahan saya mas rifai

    ReplyDelete
  34. @Yanuar aji Saputro coba di cek dahulu apakah script buku tamu yg diambil dari www.cbox.ws nya berfungsi dengan baik atau tidak, dengan cara pasang di gadget (tanpa script tambahan yang saya tuliskan di atas)

    ReplyDelete
  35. yes berhasil :D
    bleh copas kode.na gak? ak kasih sumbernya..

    ReplyDelete
  36. Allhamdulillah berhasil,,
    makasih ya infonya

    ReplyDelete
  37. wah mantap nih buat menghemat tempat widget di blog kita, jd lebih terlihat praktis n dinamis sob,,, mantap

    ReplyDelete
  38. Brow,
    bisa gak tulis kan aja
    kode buku tamu yang uda ada..

    ReplyDelete