.
Diberdayakan oleh Blogger.

Memasang Widget ChatBox Tersembunyi Dengan Mudah di Blog

Jin Botol -Chat Box atau dalam bahasa Indonesianya adalah buku tamu mungkin adalah salah satu widget yang wajib untuk sebuah blog. Karena, selain sebagai widget untuk mempercantik blog, chatbox atau buku tamu juga berfungsi sebagai sarana interaksi/komunikasi antara pengunjung satu dengan pengunjung lain bahkan pengunjung dengan administrator blog tersebut.

Tetapi banyak widget chatbox terkadang sangat menguasai lokasi pada laman blog karena ukurannya yang cukup besar dan terbilang tidak menarik, tetapi sekarang saya akan share bagaimana memasang widget chatbox yang tersembunyi di sisi kanan blog. Jika masih bingung saya akan kasih lihat pratinja contoh widgetnya.
Gambar di atas adalah contoh chatbox/buku tamu yang belum di klik, atau dalam arti kata masih tersembunyi di sisi kanan blog. Nah, untuk pratinja saat chat/buku tamu ini di buka lihat gambar berikut.
Tertarik? Ya sudah ikuti tutorial berikut untuk memasang widget ini.
  • Masuk ke akun blogger kalian.
  • Setelah anda berada di dasbor blog, klik tombol opsi lainnya dan pilih menu tata letak. Jika masih kurang jelas coba lihat gambar berikut.
  • Setelah anda masuk ke halaman tata letak, Pilih tambah gadget. Jika masih bingung juga, lihat pada gambar berikut aja.

  • Kemudian, pilih HTML/JavaScript. Kalau masih bingung juga, lihat lagi aja di gambar berikut.

  • Kemudian pastekan kode berikut dan pastekan ke dalamnya.
  • <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('http://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.png') no-repeat;
    }
    .gbcontent{
    float:left;
    border:2px solid #666666;
    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">

    WWW.ZOOTODAYS.BLOGSPOT.COM

    <div style="text-align:right"><a href="http://zootodays.blogspot.com/2012/04/memasang-widget-chatbox-tersembunyi.html" target="_blank"><small>Chat With Other People</small></a>
    <a href="javascript:showHideGB()">
    [close]
    </a>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script>
  • Sebagai contohnya lihat gambar berikut. Judul bisa di kosongkan, tetapi jika anda tidak mau kosong silahkan beri judul <!--->

  • Setelah selesai klik simpan/save dan lihat hasilnya.
KETERANGAN:

  1. Untuk WWW.ZOOTODAYS.BLOGSPOT.COM silahkan anda ganti dengan kode chatbox atau kode buku tamu anda.
  1. Dan  http://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.png adalah tabnya, secara default tab di atas berwarna hijau. Jika anda ingin mengubah dengan warna lain silahkan KLIK DI SINI!
________________________________________________________________________ _______
Mungkin anda bingung kenapa ini gambar kok keliatannya dari blog lain, iya kan? Gak usah khawatir, itu adalah blog saya yang satunya. Tetapi sekarang sudah saya tutup untuk umum karena ternyata saya tidak sanggup mengurus 2 blog sekaligus. Ya terpaksa saya posting di sini saja.

Ingin mendapatkan informasi-informasi unik serta update artikel dari kami secara berkala? Follow twitter resmi blog ini di @kupastuntasCOM dan join bersama kami di facebook Kupas Tuntas Official Fanspage Terima Kasih.
Ditulis oleh: Muhammad Irfan - Rabu, 25 April 2012

Artikel Menarik Lainnya:

  1. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  2. ayo kita ramaikan chat di www.afikc.com
    bagi yang ingin belajar trading,ingin mendapatkan informasi seputar trading kunjungi aja www.afikc.com

    BalasHapus
  3. ada lagi widget untuk livechat yang gratis gan,kayaknya cocok untuk website agan. namanya wgchat, webnya wgchat.com. asli bikinan indonesia, bisa integrasi dengan ym, facebook, dan gtalk juga.
    semoga bermanfaat.

    BalasHapus
  4. Oooo, githu toh caranya. dasar saya emang GAPTEK. Tepok jidat. Malu, tutup muka dalam Mukena aja akh... dasar aku ndesooo

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

    BalasHapus