Space 720 x 90 Tersedia
11 Dec 2014
Info Prediksi SepakBola

Cara Memasang Widget Chat Box Keren Auto Hide di Blogger

Cara Memasang Chat Box Auto Hide di Blog/Blogspot. Dengan Sobat memasang Buku tamu atau Chat BOX pada website/Blog sangat bagus untuk memudah pengunjung untuk saling mengenal dan berbagi, tujuannya tak lain untuk menjalin komunikasi dan silaturahim baik sesama pengunjung maupun para Blogger.

Screenshot:
Cara Memasang Chat Box Keren Auto Hide di Blog Screenshot

Cara pemasangannyapun cukup simple sobat tinggal copy paste script yang ada di bawah ke blog sobat. Berikut adalah tutorial untuk memasang Chat Box (buku tamu)  keren yang Auto Hide dan Auto Klik.

1. Pastikan Sudah Masuk ke Blog Sobat
2. Pilih ke tata letak / layout lalu klik add gadget,dan pilih tambahkan HTML / javascript
3. Lalu copy-paste HTML dibawah ini:
<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/-lNt98-CvXao/UTP_btUtapI/AAAAAAAAA64/usIno32mZ9M/s1600/finger21.blogspot.com+bukutamu.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" onmouseover="showHideGB()"> </div>
<div class="gbcontent">

<!-- BEGIN CBOX - www.cbox.ws - v4 -->
<div id="cboxdiv" style="position: relative; margin: 0 auto; width: 200px; font-size: 0;">
<div style="position: relative; height: 305px; overflow: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; border:#ababab 1px solid;"><iframe src="http://www3.cbox.ws/box/?boxid=3437312&boxtag=va1wrq&sec=main" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="auto" allowtransparency="yes" name="cboxmain3-3437312" id="cboxmain3-3437312"></iframe></div>
<div style="position: relative; height: 75px; overflow: hidden; border:#ababab 1px solid; border-top: 0px;"><iframe src="http://www3.cbox.ws/box/?boxid=3437312&boxtag=va1wrq&sec=form" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="no" allowtransparency="yes" name="cboxform3-3437312" id="cboxform3-3437312"></iframe></div>
</div>
<!-- END CBOX -->

<div style="text-align: center;"><span style="font-size: 10px;"><span style="font-family: &quot;Trebuchet MS&quot;,sans-serif;">Supported by <a href="http://kalongganteng.com" target="_blank">KalongGanteng</a></span></span></div><div style="text-align:right"><a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>
Keterangan:
-Kode yang saya blok warna hijau adalah gambar tombol Buku Tamu yang dapat sobat ganti sesuai selera
Tombol Auto Hide ChatBox
-Kode yang saya blok warna Kuning adalah gaya Buka chat box, jika anda menginginkan Auto Hide tanpa diklik gunakan onmouseover seperti punya saya dan jika sobat menginginkan Chat Box dengan klik ganti dengan onclick
-Kode yang saya blok warna Merah adalah kode Chat Box, silahkan ganti dengan kode Chat Box Anda, Untuk mendapatkannya silahkan ikuti langkah-langkah dibawah.

    Cara Mendapatkan Script Warna Merah diatas:

    a. Kunjungi Situs Resmi CBOX
    b. Lalu Klik Sign Up
    Cara Memasang Chat Box Keren Auto Hide di Blog Screenshot

    c. Isi dengan lengkap formulir nya, jika sudah Klik Create my CBox seperti gambar berikut
    Cara Memasang Chat Box Keren Auto Hide di Blog Screenshot

    d. Jika sukses, maka sobat akan diarahkan ke halaman Login. Silahkan Login dengan E-mail dan password tadi
    Cara Memasang Chat Box Keren Auto Hide di Blog Screenshot

    e. Nah sekarang sobat telah menjadi Member dari Cbox.ws, untuk mengganti tampilan Chatt Box-nya silahkan pilih menu Look and Feel => Style Presets. Sobat dapat memilih tampilan chat box sesuai selera. Pilih dan klik Konfirmasi (lihat gambar)
    Cara Memasang Chat Box Keren Auto Hide di Blog Screenshot

    f. Jika Sudah silahkan klik menu Publish dan copy dan paste scriptnya dan ganti scripst warna merah yang saya beri diatas dengan script baru yang sobat dapatkan dari Cbox.ws
    Cara Memasang Chat Box Keren Auto Hide di Blog Screenshot

    4. Kembali ke Blogger (masuk ke form tambahkan widget HTML / javascript tadi ) lalu paste script yang telah sobat rangkum tadi di dalamnya.

    5. Kik simpan dan lihat hasilnya, jika tidak berhasil baca lagi dengan cermat tutorialnya.

    6. Selamat Mencoba !!!

    Semoga Tutorial Memasang Chat Box Keren Auto Hide di Blog dapat membantu sobat-sobat blogger sekalian. Jika masih binggung silahkan berkomentar dibawah atau kirim pesan melalui Contact Me Semoga bermanfaat.

    17 komentar

    ka, ini template apa namanya?

    template yang mana? yang ada di live demo maksudnya?

    This comment has been removed by a blog administrator.

    jawabnya ya di widget itu. kan cuma pake nama, email aja. kalo mau pasang diblog ya harus daftar dulu. untuk melihat demonya ada diatas.

    gan kalau pasang chat blox di blog bisa ngurangin SEO ga gan?

    mbah togel tembus 082396595377 mbah kanjeng taat pribadi

    Kalau pendapat saya pribadi, saya rasa tidak. Asal jangan terlalu terobsesi dengan widget(banyak sekali memasang widget dalam 1 blog). Karena Chat box yang saya share ini sifatnya adalah widget.
    Jangan lupa beri deskripsi untuk setiap objek/variabel dalam script widget tersebut mencegah menurunnya nilai SEO suatu Blog. Semoga membantu :)

    This comment has been removed by a blog administrator.
    This comment has been removed by the author.
    This comment has been removed by a blog administrator.
    This comment has been removed by a blog administrator.

    maaph min. kalau yang bagian akhir yg menyertakan link anda serta nama blog anda diganti gak ?
    itu di bagian div dst... sampai [tutup]
    pas di bawah END CBOX

    Terserah, untuk bagian tag < span > yang ada nama Blog saya dapat Anda custom sendiri mau diganti atau dirubah juga gak papa. Asal gak hapus script untuk tutup widget chat box.

    Gan,untuk cha box nantinya bikin berat loading blog nggak ya ? makasih

    pengalaman saya gak terlalu juga sih. kecuali klw emang loading blognya berat. jadi ya tambah lemot

    Catatan :
    - Harap Berkomentar Sesuai Dengan Judul Bacaan
    - Tidak diperbolehkan Untuk Mempromosikan Barang Atau Berjualan
    - Bagi Komentar Yang Menautkan Link Aktif Dianggap Spam