Membuat Buku Tamu Tersembunyi Pada Blog

Membuat Buku Tamu Tersembunyi Pada Blog - Kebetulan ada waktu buat posting, kali ini saya akan memberikan sedikit tips dan trik untuk membuat buku tamu yang tersembunyi pada bagian samping blog sehingga bisa sedikit menghemat halaman blog kita. Artikel kali ini juga bertujuan untuk menambah beberapa tips dan trik yang telah saya sampaikan dalam blog ini. Untuk contoh BUKU TAMU yang tersembunyi pada blog bisa sahabat lihat pada bagian samping atas blog ini silahkan sobat klik dan isi juga boleh. Silahkan ikuti langkah berikut untuk Membuat Buku Tamu Tersembunyi Pada Blog. 

Langkah Awal:

1. Pertama-tama sobat harus terlebih dahulu mempunyai chatbox yang akan digunakan sebagai buku tamu seperti cbox, soutmix, chatbox. Pada blog ini saya menggunakan Chatwing. (sebelumnya saya pernah menggunakan yang lain namun lama-lama chatbox error, semoga Chatwing tidak dan juga pada Chatwing untuk pendaftarannya sangat mudah).

2. Jika sudah mendaftar maka kita akan mendapatkan kode HTML untuk embed file chatbox sehingga bisa muncul di blog kita. 

Contoh Kode :

 <!-- Begin http://chatwing.com chatbox -->
<iframe src="http://chatwing.com/chatbox/22e09790-4c13-11e2-8dd3-xxxxxxxxxxx" width="240" height="424" frameborder="0" scrolling="no">
  Please contact us at support[at]chatwing.com if you cannot embed the code
</iframe>
<!-- End http://chatwing.com chatbox -->

3. Simpan, Copy dan pastekan kebagian Kode yang berwana Merah pada Langkah selanjutnya dibawah ini.

Langkah Selanjutnya:

1. Masuk ke akun blog sahabat.

2. Kemudian Pilih Tata Letak

3. Tambah widget >> Pilih HTML/Javascript

4. Masukkan kode dibawah ini pada widget HTML/Javascript tadi.
5. Simpan, dan selesai

Kode :

<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/AVvXsEiK-1fMFj38VAz_mlruh8ZEa-bN_W_sSZZUEUMCsdrFodZLlHVWc15qF6f-IhC_Xz0rBfv_Uw30bh0i2oBM_TQU_2utsEHeIBwF03P685ZgZF-qclvXz9Iq8sQs89XdupRKcQSpinRa0IM/s1600/buku+tamu.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">
  
---------------- Kode Chatbox Yang Sahabat dapat disini -----------------

    </div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script></div>

Keterangan :
Warna Ungu = Sahabat bisa ganti dengan alamat gambar tulisan buku tamu.
Warna Biru = Sahabat bisa sesuaikan dengan warna blog sahabat
Warna Merah = Link/Kode yang sahabat dapatkan dari penyedia layanan chatbox (seperti yang saya gunakan layanan Chatwink).

Sekian sedikit tips dan trik cara Membuat Buku Tamu Tersembunyi Pada Blog semoga bermanfaat.