Cara Membuat/Memasang Chatbox di sebelah kiri blog

Ok, langsung saja kita mulai bagaimana cara Membuat/Memasang Chatbox di sebelah kiri blog. Ikuti langkah demi langkah dibawah ini:

1. Masuk ke blogger.com
2. Pilih tata letak
3. Tambah gadget
4. Pilih HTML/JavaScript
5. Masukan kode di bawah ini:

<!-- left hidden chatbox by http://rahman-ciblog.blogspot.com/ START -->

<style>

#hcl {

position:fixed;top:100px;

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/AVvXsEgEm_uyJmVAIAPpqUrhgAroVyS6Lb3CeYzuRiYHMTeZSY0nb7N58Ow_2wpFW43IRwJqFGTGU9xAGJPTNyoRKTZrpqPOhpJgSrqjz2OZdMCuc8X5-tBOWsTEV3hSOFhxDj327KythRVczu4/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"><!-- KODE SHOUTMIX ANDA DISINI -->

<br />

<div class="hc-credit">

<span style="float:left">

<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->

<span style="font-size: 100%;">

<span style="color: red;"> Get this</span>

<a href="http://rahman-ciblog.blogspot.com/2013/04/cara-membuatmemasang-chatbox-di-sebelah.html" target="_blank">

<span class="Apple-style-span" style="color: red;"> Widget</span>

</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://rahman-ciblog.blogspot.com/ END -->

Keterangan:

•  Kode yang saya cetak tebal dan saya beri warna Merah Ganti dengan kode Chatbox anda.
• Kode saya cetak tebal dan saya beri warna biru Bisa anda ganti dengan gambar chatbox lain sesuai selera anda sendiri.

Semoga Cara Membuat/Memasang Chatbox di sebelah kiri blog dapat bermanfaat...