Memberi Chatbox Pada Blogger

Pada kesempatan kali ini saya akan membahas mengenai Chatbox. Bila anda sedang membuka blog saya ini, maka pada samping kiri blog saya ada sebuah Chatbox bilamana di klik akan muncul seperti kotak obrolan di facebook. Widget yang satu ini memang istimewa menurut saya, karena dengan chatbox ini kita bisa bercakap-cakap dengan blogger lain yang sama-sama sedang online dan nongkrong di blog kita tanpa harus memenuhi entri dengan komentar. Untuk memasang widget ini tidak sulit tentunya, berikut sekilas cara yang akan saya jelaskan. Check it out

• Langkah Pertama yang kamu perlukan adalah membuka alamat website chatbox di www.cbox.ws. Setelah masuk ke halaman utama, Klik Sign Up. Kemudian isi data tersebut seperti alamat email, alamat blog dll. Jika sudah mengisi data tersebut dengan lengkap, klik Create my Cbox!

• Setelah itu kamu akan masuk di Control Panel Home, Klik Look & Feel – Colours & Fonts

• Lalu kamu akan masuk pada halaman untuk mengedit chatboxmu. Edit warna dan style chatboxmu sesuaikan dengan skin blogmu. Jika sudah selesai klik Apply. Setelah itu Klik Publish 

• Jika sudah, maka anda akan masuk pada halaman CODE GENERATOR. Isikan alamat blog mu pada Your Website. Beri tanda centang pada Enable Quick Link. Isikan Security Tag sesuai kode yang tertera..

• Pada Step 1 Where are you installing your chatbox? klik tanda panah ke bawah pilih Blogger / Blogspot.

• Pada Step 2 Choose a variation : Klik tanda panah ke bawah pilih Inline (default).

• Pada step 3 Get your code. Blog semua dan copy script tersebut.

• Sekarang kamu log in pada bloggermu. Setelah masuk, Klik Rancangan, kemudian Elemen Laman. Klik Tambah Gadget. Setelah muncul jendela baru, pilih HTML/Javascript klik tanda tambah. Kemudian Isikan Kode ini :

<!-- left hidden chatbox by http://29101996.blogspot.com/ START -->
<style>
#hcl {
position:fixed;
top:50px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxQKh-HZEIh02vlpOPAZSCnHxo2_A0FxoQ4mkiewzl_2iIglnw1NK1DTUwA9RxHEN4ipbbKjA3GNipTU81xnX1lwhA43yRMk-BoEuxr4nOcBC6gERMOWZAgbfdNRYJ8qTapp651uyy9WY/s400/cbred-LEFT.png') no-repeat;
}
.hclcontent {
float:left;
border:2px solid #790909;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}
function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>
<div id="hcl">
<div class="hclcontent">

<script chatbox kamu>

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href="http://29101996.blogspot.com/2010/06/hidden-chatbox.html" target="_blank">
Get this widget!
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcl()">
[close]
</a>
</span>
</div>
</div>
<div class="hcltab" onclick="showHidehcl()"> </div>

</div>
<script type="text/javascript">
var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>
<!-- left hidden chatbox by http://29101996.blogspot.com/ END -->

• tanda yang berwarna merah gantikan dengan script chatboxmu yang terdapat pada Step 3 tadi. Jika sudah Klik SIMPAN. Lalu pada Elemen Laman klik SIMPAN. Kemudian Klik Lihat Blog untuk melihat hasilnya.

Maaf tidak menampilkan tutor berupa gambar karena keterbatasan Koneksi di wilayah Surabaya Utara.

Selamat Mencoba