Script Membuat Kotak ChatBox Melayang.

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/AVvXsEjjnDZ4x9NIgFKcRFYPkyyu6LHB2n9lsNlTp8NUWXaebR-_qZZzhRtyaAAGpsL7SIHJxuojggWFbww_ZUEaSfTZtVaRa5Nq4OgGqrUetL2MC-zLh2YlCkXPfWupbezMdIbIIo7FQIEe_E8/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://ar-shared.blogspot.com/2011/01/artikel-tip-n-trik-bloger.html/" target="_blank">

Get this widget here.....!

</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.
Semoga Bermanfaat dan Selamat bereksperimen....!!