Tips Trik Blog: Script Membuat Kotak Chat (Chat Box) Melayang

Mungkin sobat sering melihat blog-blog dengan tampilan chat box (kotak chat) melayang disebelah kanan atas atau kiri yang jika kita klik logo "chat"nya, maka akan muncul kotak chatnya.
Berikut ini akan sedikit saya jelaskan bagaimana cara untuk Membuat Kotak Chat (Chat Box) Melayang

Tanpa basa basi lagi.. sobat login dulu kedalam akun blogger sobat.
langsung saja ke cara-caranya:

1. masuk ke menu rancangan
2. pilih elemen halaman.
3. pilih javascript/html
4. copy dan pastekan kode berikut ini.

<style>

#hcr {

position:fixed;

top:100px;

z-index:+1000;

}

* html #hcr {position:relative;}

.hcrtab {

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6VxZu7SC42tRkN-d1rVR8PmfQiWEqG6CGzliTfHPHYlazIxsfGKdTZeRK_AzafRDGwCsdiKIREV8cBSCM9m-__xveKbCBpDuov3L9frLkSH5NPfGwzzYwJNjbNmty5VlZ5xWvUHELDq8/s400/cbblue.png') no-repeat;

}

.hcrcontent {

float:left;

border:2px solid #008232;

background:#f3f6f7;

padding:10px;

}

.hc-credit {font-size:9px}

.hc-credit a {text-decoration:none}

</style>

<script type="text/javascript">

function showHidehcr(){

var hcr = document.getElementById("hcr");

var w = hcr.offsetWidth;

hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);

hcr.opened = !hcr.opened;

}

function movehcr(x0, xf){

var hcr = document.getElementById("hcr");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

hcr.style.right = x.toString() + "px";

if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}

}

</script>

<div id="hcr">

<div class="hcrtab" onclick="showHidehcr()"> </div>

<div class="hcrcontent">

<!-- MASUKAN KOTAK CHAT ANDA DISINI -->

<br />

<div class="hc-credit">

<span style="float:left">

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

<a href="http://www.fadlypuccino.co.cc/" target="_blank">

Get this widget!

</a>

</span>

<span style="float:right">

<a href="javascript:showHidehcr()">

[close]

</a>

</span>

</div>

</div>

</div>

<script type="text/javascript">

var hcr = document.getElementById("hcr");

hcr.style.right = (30-hcr.offsetWidth).toString() + "px";

</script>

5.lalu anda simpan dan lihatlah hasilnya.

Selamat bereksperimen..