Cara membuat Chatbox (Buku Tamu) Buka-tutup di Samping pada Blog

Cara membuat Chatbox Buka-tutup di Samping | Chatbox atau buku tamu saat ini sering digunakan oleh beberapa blogger untuk mempermudah pembaca berinteraksi dengan admin atau sekedar meninggalakan jejak. Dan beberapa diantara memasang chatboxnya di samping dengan mode buka tutup, supaya blognya tidak terlihat sesak namun tetap tampil profesional.

Dan pada postingan ini saya akan memberikan cara untuk mendapatkan gadget cbox dengan model buka-tutup, seperti yang sudah dijelaskan.

Bagi yang belum mempunyai chatbox/buku tamu, silahkan Klik disini

Berikut langkah-langkahnya :
  1. Login ke Blogger
  2. Pilih blog anda, lalu klik Tata letak
  3. Klik Edit pada gadget chatbox/buku tamu yang telah dibuat.
  4. Copy dan paste kode HTML berikut pada box konten :

    <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://sites.google.com/site/ojel88/_/rsrc/1281597152186/home/tabs2.gif') no-repeat;
    }
    .gbcontent{
    float:left;
    border:2px solid #000000;
    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 HTML Buku Tamu anda
    <br/>
    Mau punya buku tamu seperti ini?<br/>
    Klik 
    <a href="http://zhmiepallace.blogspot.com/2012/08/cara-membuat-buku-tamu-buka-tutup.html">
    disini
    </a>

    <div style="text-align:right">
    <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>

    Catatan : Pada Teks berwarna merah "Kode HTML Buku Tamu anda" , ganti dengan kode HTML cbox anda.
  5. Setelah selesai klik Simpan.
Kini anda sudah mempunyai kotak chatbox/buku tamu buka-tutup milik anda sendiri.

Selamat mencoba dan selamat menikmati.. :D...

12 comments

makasih , artikelnya ngebantu banget :)

Balas

yup.. sama-sama..

Balas

mas izin ngambil kode nya buat artikel.. :D

Balas

gan gmna car mindahin buku tamu x ke kiri
Mohon penjelasnya

Balas

kalau ke kiri gambar tabnya beda lagi gan, scriptnya juga beda lagi kayaknya..

Balas

Mkasih Info,nya gan, tambah ilmu lagi dech,,,mkasieh

Balas

blog gua malah acak2an -___-
kok yg gua ga diem di pinggir sih?

Balas

yahh itu sih tergantung templete elunya, ama bener enggak nempatin codenya.. coba cek lagi deh..

Balas

thx infonya,kunjungi balik ya http://koekuy.blogspot.co.id/

Balas

Waduh, kyk gini aja saya gak bisa... tak minum Susu Kambing dulu, biar tambah paham...
Terimakasih manfaat banget artikelnya

Balas

Terima kasih atas kunjungan anda. Ayo berkomentar demi mempererat tali silaturahmi kita sesama blogger dan demi memajukan blog ini! Karena komentar anda adalah dorongan dan motivasi bagi saya untuk tetap bisa menyajikan yang terbaik bagi anda. Dan saya, dengan senang hati akan berkunjung ke blog anda, jika ada kesempatan. ;-)

PERINGATAN : Komentar yang berisikan kata-kata negatif, komentar yang berbau SARA, atau komentar SPAM, akan di HAPUS oleh admin.