D'lovelizzers: Menyembunyikan Shoutmix ChatBox (ChatBox Hidden) Di Kiri dan Di Kanan blog

Chat Shoutmix di blog adalah hal yang sangat menguntungkan karna para pengunjung bisa berbagi informasi dengan sang pemilik blog dan juga pengunjung lainnya..
Namun, terkadang ada beberapa teman terlalu banyak memasang gadget iklan hingga tak ada tempat lagi untuk memasang fasilitas chat.

Untuk mensiasatinya maka kita buat chat dalam bentuk hidden seperti yg ada di kanan atas blog ini..

Jika
sobat belum mempunyai chat shoutmix silahkan download dulu disini

Nah, buat sobat yg ingin memasang chatbox hidden berikut langkah-langkahnya:

1. Login ke blog sobat
2. Klik Rancangan
3. Tambah Gadget
4. Cari tempat yg ingin di pasang chatbox
5. Copy kode di bawah ini dan pastekan pada Gadget sobat

Untuk ChatBox hidden Kiri

<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('http://mob737.photobucket.com/albums/xx17/arisyudha/chatbox.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">

MASUKAN KODE SHOUTMIX DISINI

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

<a href="http://lovelizzers.blogspot.com/2011/06/menyembunyikan-shoutmix-chatbox-chatbox.html" target="_blank">
Get this!
</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>

Untuk ChatBox Hidden Kanan

<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://mob737.photobucket.com/albums/xx17/arisyudha/Chatbox-1.png') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #003e82;
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">

TARUH KODE SHOUTMIX DISINI

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

<a href="http://lovelizzers.blogspot.com/2011/06/menyembunyikan-shoutmix-chatbox-chatbox.html" 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>

6. Klik Simpan dan Selesai..

Sekarang lihat blog sobat, chat box shoutmix sobat udah tidak terlihat lagi