Cara Membuat Chat Box Panel Keren

Cara Membuat Chat Box Panel Keren - Di kesempatan kali ini saya akan membahas satu lagi tips Blogging yaitu memasang panel Chat di Blog . 

Dan chat Box yang akan saya bahas ini cukup keren dan memiliki sisi artistik yang elegant .

Penasaran ? Untuk mengetahui seperti apa hasilnya silahkan lihat pada gambar diatas . Atau jika ingin melihat Demo nya silahkan buka sendiri di panel Chat Blog pada Blog ini , tepatnya disisi sebelah kanan Blog .

Yang menarik dari widget ini adalah karena fitur tambahan jQuery yang saya tambahkan dengan fungsi buka tutup / Slide yang smooth .

Fitur chat yang akan saya gunakan ada 2 Versi yang bisa anda pilih sendiri .
Pertama menggunakan Cbox dan kedua menggunakan Chatroll .

Jika kita ngomongin cBox saya rasa semua blogger sudah tahu fasilitas yang satu ini , tapi buat yang belum tahu maka saya akan membagikan tutorial lengkap pemasangannya di Blog .
Siap untuk memasangnya ? Mari kita langsung saja masuk ke inti pembicaraan kita kali ini Yakni Membuat Chat Panel Keren di Blog .

Tutorial kali ini akan saya bagi menjadi 2 Step 

1. Pengambilan Code Chat Cbox
2. Pemasangan Pada Blog

Step #1 Pengambilan Code Chat

Pertama kita akan menggunakan Cbox . 
Langkah2nya sebagai berikut .

1.Pertama silahkan masuk kesini .
2.Klik Sign Up untuk mendaftar gratis

3.Isikan semua yang diminta pada kolom pendaftaran

4.Setelah Sukses langsung login dan buka Panel Look & Feel seperti pada gambar dibawah ini untuk mengatur halaman chatnya .

5.Setelah semua dirasa cukup langsung klik panel Publish di bagian menu untuk mengambil Code nya .

Kode inilah yang nantinya akan kita pasang di dalam Blog .

Untuk memasangnya silahkan ikuti cara pemasangan pada Blog dibawah ini .

Step #2 Cara Pemasangan Pada Blog .
Login ke dasbor Blogger anda
Buka menu Layout
Add Gadget dan pilih HTML/JavaScript
Paste kan code jQuery dibawah ini di kolom yang tersedia

<style type="text/css">
#gb {position:fixed;top:50px;z-index:+1000;}
* html #gb {position:relative;}
.gbtab {height:41px;width:33px;float:left;cursor:pointer;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZM1gGF60BYR16TCjIV_KBC-61MFGTXROvF_cu5K6TEVjLkV8wl1LxlGu4rx5Z0_OBtKHIUwK0gpnVXkavGLPmR0vbgK70V1Vp_a79ef8b0_af7WxV3YZvSnTXHPH9s2eBT6vtjafXkw3o/s1600/live_chat_icon.png') no-repeat;}
.gbcontent {float:left;border:0px solid #A5BD51;background: #CBCBCB url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit_xGtXyMSJLlL4_QrryRKou6FmBL6JVTl2kyZtsyLSj7PZzRzupDW14tFjdQH1pyTbH0jp-0lrMVKfOytNmdzedDC-dQ7LZFqn0vP2FaGjJbdR7dakZUEFUsz5QsKY-pZpkvXB0B66bE/s1600/main.png) top left repeat;padding:10px;-moz-box-shadow: 0 0 15px #999;
-webkit-box-shadow: 0 0 15px #999;
-o-box-shadow: 0 0 15px #999;
box-shadow: 0 0 15px #999;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}
</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">
Paste Kode Cbox Anda Disini !  
<br/>
<span class="Apple-style-span" style="color: #cccccc; font-family: arial, sans-serif; font-size: 10px;float:right;"><a href="http://ichihikaru.blogspot.com/" target="_blank">Ichi Hikaru</a></span>
<a href="javascript:showHideGB()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSwnUk_tHtPpxwEU_CPKy5A-p7lJIUkoNWguOj4wzfl3kveyg-s-6zldXWNyfwTE8uOFSF8Q6Y5Y88rzZkWmuecthgq8nBgfvH4jcujAHANh_vEZxUUGP4LhflsHOlW0trODgN20dExik/s1600/close+button.png"/></a>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

Keterangan .

1. Warna Ungu adalah Url Icon yang akan tampil sebagai Panel Slide chatBox , anda bisa menggantinya dengan gambar anda sendiri .
2. Warna Orange adalah Background dari widget Chat Box , anda bisa menggantinya menggunakan url gambar milik anda sendiri
3. Warna Merah adalah tempat dimana anda meletakkan Code CBox anda .
4. Warna Biru , silahkan ganti dengan url Blog anda atau link apapun terserah anda .
5. Warna Hijau adalah url gambar tombol Close , seilahkan ganti dengan url gambar milik anda sendiri jika anda tidak menyukainya .

Mengambil Code Chatroll

1.Masuk kesini 
2.Sign Up dengan gratis

3.Isikan semua data yang diminta pada form pendaftaran

4.Setelah itu login ke dashcoard Chatroll dan sesuaikan desain yang anda inginkan

5.Kemudian Copy Code yang ditampilkan seperti gambar dibawah ini

6.Langkah selanjutnya pasang di blog anda dengan melakukan cara yang yang saya bahas di Step #2 Diatas .

Selanjutnya klik simpan dan lihat hasilnya .

Untuk tampilan Chatroll bisa anda lihat dibawah ini .

Demikian tutorian tentang Cara Membuat Chat Box Panel Keren di blog , dan semoga bermanfaat untuk anda semua .

Author : Ichi Hikaru

Share this Article

Related Posts