Membuat Chat Box Tersembunyi V 2

Dalam rangka melanjutkan postingan sebelumnya yaitu Membuat Chat Box, kali ini saya akan share sebuah tutorial tepatnya Membuat Chat Box Tersembunyi V 2. Bagi sobat yang belum mempunyai Chat Box, sobat terlebih dahulu baca postingan saya sebelumnya yaitu Membuat Chat Box. Ok langsung saja kita ke inti postingan yang saya bahas ini.

Ikuti langkah - langkah dibawah ini untuk mengetahui bagaimana cara membuat Chat Box tersembunyi.

Pertama yang harus sobat lakukan adalah Login dulu ke Blogger.com
Kemudian sobat pergi ke Tata Letak.
Pilih edit Gadget/Widget Chat Box.
Hal yang harus sobat lakukan selanjutnya adalah menambahkan kode berikut :

<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:130px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i1260.photobucket.com/albums/ii570/Saeful13/Chat-Box5.gif') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #000000;
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">

Disini sobat simpan kode Chat Box

<br />
<div class="hc-credit">
<span style="float:left">


</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>

Langkah terakhir sobat Save

Keterangan

Sobat ganti teks berwarna biru dengan url blog sobat.
Sobat juga dapat mengganti border/garis pinggir chat box sesuai warna yang sobat inginkan atau untuk kode warnanya disini. Caranya sobat ganti tulisan yang berwarna kuning dengan warna yang sobat inginkan..
Sobat juga bisa mengganti gambar Chat Box di bawah ini dengan cara mengganti teks yang berwarna merah dengan kode yang telah saya sediakan di bawah.