Cara Memasang Widget Chat Box Keren Auto Hide di Blogger

Author : UnknownTidak ada komentar

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjMvUY1-Z2X5SKOGGRq8X0vNgk9f8uRQmYWEd_ttzAOO9s5Zopird4eZVKyjyZazBxJSuLsmw2INM3MAiPLnka4ppRmv-SFV5PKWmcQegJE6RNrJjD-onFtFUr5PH7E9QGq_XPjtvKpO9F/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.

    Artikel Terkait

    Posted On : Kamis, 11 Desember 2014Time : 03.43
    SHARE TO :
    | | Template Created By : Binkbenks | CopyRigt By : Online oke | |
    close
    Banner iklan disini
    > [Tutup]