Cara menyembunyikan Shoutmix chat di pinggir kiri dan kanan

Kali ini saya akan memposting tentang cara menyembunyikan Shoutmix chat di pinggir kiri dan kanan. Kalian yang punya blog pasti sering menambahkan HTML/Javascriptkan sampai-sampai tempat menyimpan HTML/Javascrip sudah penuh terisi. Nah saya akan memberitahukan bagaimana cara menyembunyikan Shoutmix chat, sebenarnya bukan hanya shoutmix chat saja yang bisa di sembunyikan tapi yang lainnya juga bisa. Sekarang saya kasih nih langkah dan HTML/Javascriptnya :

1. Masuk ke blogger
2. Klick rancangan/tata letak
3. Tambah Gadget
4. Copy kode di bawah ini dan pastekan di gadget kalian

Untuk sebelah kiri

<!-- left chatbox hidden from http://hextrix.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('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">

PASTEKAN KODE SHOUTMIX DISINI

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href="http://hextrix.com/2011/08/cara-menyembunyikan-shoutmix-chat-di.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>
<!-- left chatbox hidden from http://hextrix.com/ END -->


Untuk sebelah kanan

<!-- right chatbox hidden from http://hextrix.com/ START -->
<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">

PASTEKAN KODE SHOUTMIX DISINI

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href="http://hextrix.com/2011/08/cara-menyembunyikan-shoutmix-chat-di.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>
<!-- right chatbox hidden from http://hextrix.com/ END -->

5. Klick Simpan/Save

Silahkan Mencoba...........