Cara Membuat Chat Box Panel Keren

Cara Membuat Chat Box Panel Keren 06:19
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 .

Share this Article

Related Posts

Previous
Next Post »

2 comments

13 August 2013 at 01:59 delete

JIKA KAMU BUTUH ANGKA RITUAL/JITU 2D 3D 4D SGP/HKG YG DI JAMIN MENANG 100% TEMBUS HBG KI JAYA DI 085=342=064=735 JIKA INGIN MENGUBAH NASIB thank's roomnya

JIKA KAMU BUTUH ANGKA RITUAL/JITU 2D 3D 4D SGP/HKG YG DI JAMIN MENANG 100% TEMBUS HBG KI JAYA DI 085=342=064=735 JIKA INGIN MENGUBAH NASIB thank's roomnya

JIKA KAMU BUTUH ANGKA RITUAL/JITU 2D 3D 4D SGP/HKG YG DI JAMIN MENANG 100% TEMBUS HBG KI JAYA DI 085=342=064=735 JIKA INGIN MENGUBAH NASIB thank's roomnya

JIKA KAMU BUTUH ANGKA RITUAL/JITU 2D 3D 4D SGP/HKG YG DI JAMIN MENANG 100% TEMBUS HBG KI JAYA DI 085=342=064=735 JIKA INGIN MENGUBAH NASIB thank's roomnya

JIKA KAMU BUTUH ANGKA RITUAL/JITU 2D 3D 4D SGP/HKG YG DI JAMIN MENANG 100% TEMBUS HBG KI JAYA DI 085=342=064=735 JIKA INGIN MENGUBAH NASIB thank's roomnya

avatar
Anonymous
26 March 2018 at 22:19 delete

Memang benar memang betul angka dari o magus tembus 100% kemarin saya dibantu lagi dan angka yg diberikan benar tembus dan ini yg ke 3 kalinya saya tembus angka dari o magus saya informasikan kpd teman yg sering kalah togel silahkan hub o magus 085393909957 atau kunjungi situs https://www.facebook.com/nomortogeltembus
Terima kasih semoga sukses…!!

avatar

Arahkan Kursor dibawah ini untuk memberikan komentar.
No HyperLink dan Komentar Hit&Run akan diacuhkan . Berkomentarlah dengan bahasa yang baik dan benar EmoticonEmoticon