Cara Membuat Buku Tamu Mirip Chat Facebook di Blog

Kesempatan kali ini saya membahas mengenai cara bagaimana cara membuat Buku Tamu alias Guestbook yang dipasang pojok kanan bawah, Mirip dengan Tampilan Chat Obrolan di Facebook.

Membuat Guestbook Blog Mirip Chat Facebook


Dalam Guest Book ini saya gunakan fasilitas Widget Cbox, dan Whos.amung yang digabungkan mirip dengan tampilan facebook. Widget Cbox sebagai Tempat Chat, sedangkan Whos.amung sebagai widget yang akan mengetahui jumlah yang sedang online.


Hanya saja Guestbook ini tidak semirip dengan Chat Obrolan Facebook, karena tidak ada daftar nama yang sedang online. Namun jika anda ingin membuat Chat Facebook mirip, dengan daftar nama yang sedang online, Anda bisa gunakan fasilitas Widget dari envolve.com, tapi itu tidak gratis, alias bayar. (hanya versi trial dengan waktu 15 hari, selanjutya memiliki tarif berikutnya).

Berikut Membuat Guestbook Blog Mirip Chat Facebook Gratis:


  1. Silahkan Anda Mengunjung [http://www.cbox.ws], kemudian Membuat Akun, kemudian verifikasi email. Selanjutnnya memilih warna, dan pengaturan Widget Cbox, dan seterusnya sampai tampilan seperti gambar ini. [lihat gambar]

  2. Berikut ini adalah Kode Widget Cbox saya. Kode Cbox Anda Pasti akan Berbeda dengan kode Cbox saya ini. Kode Cbox ini hanya sekedar untuk Contoh saja
    <!-- BEGIN CBOX - www.cbox.ws - v001 -->
    <div id="cboxdiv" style="text-align: center; line-height: 0">
    <div> <iframe frameborder="0" width="200" height="305" src="http://www5.cbox.ws/box/?boxid=837716&amp;boxtag=x5nr9q&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-837716" style="border:#ababab 1px solid;" id="cboxmain5-837716"></iframe></div>
    <div><iframe frameborder="0" width="200" height="75" src="http://www5.cbox.ws/box/?boxid=837716&amp;boxtag=x5nr9q&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-837716" style="border:#ababab 1px solid;border-top:0px" id="cboxform5-837716"></iframe> </div>
    </div>
    <!-- END CBOX -->
  3. Kemudian Anda juga Masuk ke Situs http://whos.amung.us/, Kemudian Masuk ke Sub Menu Widget, Pilih yang "The Small Widget". Perhatikan Gambar ini.



    Berikut ini adalah Kode Widget Who's.Amung saya. Kode Who's.Amung Anda Pasti akan Berbeda dengan kode Who's.Amung saya ini. Kode Who's.Amung ini hanya sekedar untuk Contoh saja.

    <script id="_waufa2">var _wau = _wau || []; _wau.push(["small", "wsetk9ghf5jc", "fa2"]);
    (function() {var s=document.createElement("script"); s.async=true;
    s.src="http://widgets.amung.us/small.js";
    document.getElementsByTagName("head")[0].appendChild(s);
    })();</script>
  4. Kemudian Anda Login ke Akun Blogger Anda. Masuk ke Dasbor Blogger > Tata Letak > Tambah Widget > HTML.

    Masukkan Kode-kode ini:

    <div style="position:fixed;right:24px;bottom:2px;z-index:999;width:auto;height:auto;overflow:hidden;background:transparent;">MASUKKAN KODE WHO'S.AMUNG ANDA KEDALAM KODE INI</div>
    
    <div id="cboxbutton" style="position:fixed;color:rgb(50,50,50);bottom:0px;right:20px;width:200px;height:20px; text-align: left; cursor: pointer; background:rgb(235, 238, 244) url(http://3.bp.blogspot.com/-59aomK814yw/UHvzV8lyo0I/AAAAAAAAA0g/aldclc728qg/s320/gambaronlineputih.png)no-repeat;padding:2px 3px 0px 22px;border:1px solid rgba(29, 49, 91, 0.3);border-bottom:none;font-family: Tahoma, sans-serif; font-weight:bold;" onclick="togglecbox()">Obrolan</div>
    <div id="cboxdiv" style="display: none; position: fixed; bottom: 25px; right: 20px; width: 200px; background: rgb(235, 238, 244) url(https://s-static.ak.facebook.com/rsrc.php/v2/yb/r/GsNJNwuI-UM.gif) no-repeat 50% 50%;padding: 3px; line-height: 0;border:2px solid rgba(29, 49, 91, 0.3);"></div>
    <script type="text/javascript">
    var cbvis = false;
    var cbload = false;
    var cbcookie = "cboxvis=";
    
    function togglecbox () {
        var cbdiv = document.getElementById("cboxdiv");
        var cbbut = document.getElementById("cboxbutton");
    
        if (!cbvis) {
            if (!cbload) {
                cbdiv.innerHTML = 'MASUKKAN KODE CBOX ANDA KEDALAM KODE INI, DAN HANYA KODE YANG BERWARNA BIRU SAJA, DAN HAPUS KODE YANG BERWARNA MERAH';
                cbload = true;
            }
            cbdiv.style.display = "block";
            cbbut.innerHTML = "Obrolan";
        }
        else {
            cbdiv.style.display = "none";
            cbbut.innerHTML = "Obrolan";
        }
        cbvis = !cbvis;
        document.cookie = cbcookie+((cbvis)?1:0);
    }
    // Toggle Cbox open if it was previously
    var cbcookiei = document.cookie.indexOf(cbcookie);
    if (cbcookiei >= 0) {
        if (document.cookie.substring(cbcookiei+cbcookie.length, cbcookiei+cbcookie.length+1) === "1") {
            togglecbox();
        }
    }
    </script>
    Catatan: Untuk Kode Cbox Anda, Hapus Kode </div> <div> dan Masukkan Kode Cbox yang berwarna Biru Saja. Perhatikan tanda warna merah pada 'contoh' kode Cbox

Setelah Anda Masukkan Kode-kode Cbox dan Who's.Amung kedalam Kode-kode diatas [Lihat kode pada langkah ke-3], Klik Simpan, dan Selesai. Ini Kode-kode yang sudah terkumpul jadi satu, dan siap untuk di simpan. Contoh Kode Buku Tamu Mirip Chat Facebook di Blog saya.

<div style="position:fixed;right:24px;bottom:2px;z-index:999;width:auto;height:auto;overflow:hidden;background:transparent;"><script id="_waufa2">var _wau = _wau || []; _wau.push(["small", "wsetk9ghf5jc", "fa2"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/small.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script></div>

<div id="cboxbutton" style="position:fixed;color:rgb(50,50,50);bottom:0px;right:20px;width:200px;height:20px; text-align: left; cursor: pointer; background:rgb(235, 238, 244) url(http://3.bp.blogspot.com/-59aomK814yw/UHvzV8lyo0I/AAAAAAAAA0g/aldclc728qg/s320/gambaronlineputih.png)no-repeat;padding:2px 3px 0px 22px;border:1px solid rgba(29, 49, 91, 0.3);border-bottom:none;font-family: Tahoma, sans-serif; font-weight:bold;" onclick="togglecbox()">Obrolan</div>
<div id="cboxdiv" style="display: none; position: fixed; bottom: 25px; right: 20px; width: 200px; background: rgb(235, 238, 244) url(https://s-static.ak.facebook.com/rsrc.php/v2/yb/r/GsNJNwuI-UM.gif) no-repeat 50% 50%;padding: 3px; line-height: 0;border:2px solid rgba(29, 49, 91, 0.3);"></div>
<script type="text/javascript">
var cbvis = false;
var cbload = false;
var cbcookie = "cboxvis=";

function togglecbox () {
    var cbdiv = document.getElementById("cboxdiv");
    var cbbut = document.getElementById("cboxbutton");

    if (!cbvis) {
        if (!cbload) {
            cbdiv.innerHTML = '<iframe frameborder="0" width="200" height="305" src="http://www5.cbox.ws/box/?boxid=837716&amp;boxtag=x5nr9q&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-837716" style="border:#ababab 1px solid;" id="cboxmain5-837716"></iframe><iframe frameborder="0" width="200" height="75" src="http://www5.cbox.ws/box/?boxid=837716&amp;boxtag=x5nr9q&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-837716" style="border:#ababab 1px solid;border-top:0px" id="cboxform5-837716"></iframe>';
            cbload = true;
        }
        cbdiv.style.display = "block";
        cbbut.innerHTML = "Obrolan";
    }
    else {
        cbdiv.style.display = "none";
        cbbut.innerHTML = "Obrolan";
    }
    cbvis = !cbvis;
    document.cookie = cbcookie+((cbvis)?1:0);
}
// Toggle Cbox open if it was previously
var cbcookiei = document.cookie.indexOf(cbcookie);
if (cbcookiei >= 0) {
    if (document.cookie.substring(cbcookiei+cbcookie.length, cbcookiei+cbcookie.length+1) === "1") {
        togglecbox();
    }
}
</script>

Untuk apa sih Guestbook ini di buat?


Ini adalah salah satu cara untuk membangun suasana interaktif antar pengunjung, dan pemilik blog. Sehingga juga berpotensi untuk mencari backlink. Cukup Sekian, Apabila ada kesalahan, silahkan komentar dibawah ini.

Comments

Popular posts from this blog

Latihan Soal-soal Ujian SIM A/Umum, B/Umum, C, dan D

Tips dan Trik Mudah Lulus Ujian SIM C Tanpa Nyogok Calo

Informasi Lengkap Tempat Menghafal Al-Qur'an