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('http://3.bp.blogspot.com/-pHvrVvY3BPc/USUcMy5szZI/AAAAAAAAEKk/sLg9XHpzPZg/s1600/live_chat_icon.png') no-repeat;}
.gbcontent {float:left;border:0px solid #A5BD51;background: #CBCBCB url(http://2.bp.blogspot.com/-ilRv7V-NZlc/UUAre03RknI/AAAAAAAAFrs/lJ_XMspsNcM/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="http://2.bp.blogspot.com/-Or9eHiUjGR0/Ud4QK2UVS3I/AAAAAAAAJXc/pT3Ghmq1LHU/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 »

3 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
9 July 2014 at 05:05 delete

Buat Anda Yang Ingin Menang Togel.Dengan Angka Ghoib HasiL.RituaL"Jitu-2D-3D-4D-6D-Di Jamin 100% Tembus.Silahkan Anda Hubungi KYAI DEWOO.Di Nomor(_0_8_5_2_9_3_5_7_7_7_9_9)Silahkan Anda Buktikan Sendiri.Dan Jangan Di Sia Siakan Kesempatan Ini.Jika Anda Ingin Mengubah Nasib Anda.Terimah Kasih

avatar
11 April 2015 at 10:10 delete

Saya Sangat BerTerima kasih Atas Bantuan Angka Ritual MBAH…Angka MBAH EROK PRANAL Tembus 100%…Saya udah kemana-mana mencari angka yang mantap selalu gak ada hasilnya…sampai- sampai hutang malah menumpuk…tanpa sengaja seorang teman lagi cari nomer jitu di internet…Kok ketemu NomoR MBAH EROK PRANAL..Saya coba beli Paket 4D ternyata Tembus…dan Bagai di sambar Petir..Ternyata Angka Ritual Ghoib MBAH EROK PRANAL…Yang SaYa Minta Tembus 4D…Baru kali ini saya mendapat angka ritual yang benar-benar Mantap…Bagi saudara yang ingin merubah Nasib seperti saya…Anda Bisa CALL/SMS Di Nomer MBAH EROK PRANAL 085 377 797 151.(((Buktikan Aja Sendiri Saudara-Saudari)))

avatar

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