Memasang Buku Tamu Slide di Blog

Ingin buat blog sobat jadi tambah ramai dengan menyisipkan Buku Tamu Slide? Kali ini saya akan share bagaimana cara memasang Buku Tamu Slide kayak melayang gitu denk di blog sobat.
Seperti yang terlihat di sebelah kanan halaman ini.
Ada banyak site yang menyediakan aplikasi ini, tetapi yang paling populer itu Shoutmix dan Cbox (seperti yang saya gunakan ini), karena Shoutmix banyak terjadi error saat meninggalkan pesan maka saya gunakan saja yang Cbox-nya.

Untuk mengetahui kisah selanjutnya, langsung saja kita ke TKP...

#Langkah 1

Sobat buat akun dulu di Cbox. Klik di sini>.
Silahkan isi form yang sudah tersedia.

• Cbox Name : isi nama untuk akun Cbox anda misalnya "aditya". Ini digunakan untuk masuk ke akun anda di Cbox.
• Email Address : masukkan email anda yang aktif.
• Password : password anda tentunya.
• Website : isikan alamat blog sobat, misalnya "http://adityameilaz.blogspot.com".
• Language : sesuai selera. :P
• Style : pilihan untuk model Buku Tamu.

Jangan lupa untuk mencentang kotak di samping kiri kata "I have read and do agree to the Cbox terms and conditions of service".
Terakhir klik tombol "Create my Cbox!".

Catatan: jangan lupa konfirmasi di email anda.

Setelah konfirmasi email, langsung saja sobat blogger tekan tombol yang berlabelkan "Copy to clipboard".

#Langkah 2

• Login ke blog sobat, kemudian pilih Design >> Page Element.
• Pada bagian halaman, klik "Add a Gadget".
• Pilih gadget HTML/JavaScript dan copas kode di bawah ini :

<style type="text/css">
#gb{position:fixed;top:50px;z-index:+1000;}
* html #gb{position:relative;}
.gbtab{height:120px;width:40px;float:left;cursor:pointer;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWkoX2H4x5wiiBlOtZQGTCptRTRKIneaHdMz1YQrPVI2pCzs6XeBbHzQgcZt1hjjfczq3qe8rZkscP4a4gXhTeJYijJyR5bg2H6X9qIkKtglt0ntqaW0AtzT4j3zP6yefXLLeyd-JG5Gfo/s104/guestbook2.png') no-repeat;}
.gbcontent{float:left;border:1px solid #78D0FF;background: #f6f8f8;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">

<!-- PASTE KODE BUKU TAMU ANDA DI SINI -->

<center>Pengen Buku Tamu seperti ini??<br/>Klik di <a href="http://adityameilaz.blogspot.com/2011/01/memasang-buku-tamu-slide-di-blog.html" target="_blank" title="Buku Tamu Slide">sini</a></center></div></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Ganti atau replace kode yang sudah di highlight dengan kode dari buku tamu yang anda dapat dari Cbox.

#Langkah 3

Inilah langkah yang paling penting dan harus teliti agar Buku Tamu anda berjalan dengan sempurna.
Cuma menekan tombol SAVE.

Jangan lupa untuk meninggalkan komentar/buku tamu nya untuk artikel ini yah...

Gabung ke group:

Follow @aditya_m_r

Share