Membuat chat box hide ke kana atau ke kiri

langsung aja ya dibaca nich jangan ampe ngantuk kalo ngantuk ngopi dulu

untuk caranya 

1.Copy scrip dibawah ini dan ganti tulisan <!-- KODE SHOUTMIX ANDA DISINI --> dengan scrip kode cat box anda

 caranya :

• Klik Dasbord - 
• Tata Letak - Elemen Lama,
•  Lalu anda klik tambah gadget / add gadget dan pilih opsi HTML/ Javascript. 
• Paste kode HTML yang tadi anda copy sebelumnya. 
• Klik OK dan 
• Save
 

Berikut ini adalah icon hidden chatbox dan warna border yang serasi dan bisa anda gunakan dalam hidden chatbox anda :

URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxSp9Ym69keYEQXzMe3f3w1NphT40Vn-PcZ-kljztungb67mnCLxirFWjrAaBX8NwEskuRyJ-yg8iTENxfOkT5XpuBI9OEpM3UoFTp47r28zAhBFp_HvX4IRMNLrObqreOIgaS-3fz5ch7/s1600/cbblue-2.png
Warna border #0079a0


URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Naxit_iVQGwls3FT5WFWSoya9bONk-MMOq8-3esBPwYEovb7CDzSdr0_VxBvEWl83I2VgwX1cS4D37F4k_4NrYqgKW2893uWzLZ9wU_fgOM4tUNl7Jazm89diEPsp-Wb_Rr4kztwLRVI/s1600/cbblue.png
Warna border #003e82


URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiBxr1zmnOtXyswOKFAdO3pCxcIFk3kPka-TjGG64gFk_trYTEBuZ0GV2uUC8PJVuMF9SFy4HeV5c7p7P2DAAFwgW2q8FcjC8bkBvBVLKLAAwtHBNc-vV2HOIUxl8wymVhyd0mLAe4hrgq/s1600/cbgreen.png
Warna border #008232






URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHA5Z27sSmNDfEPfsbbeCeQTUCXgkrgOjsfxOLm0USYKjNPQfnyv4lldyRy5-HkPPvJEoRtwxEMA9OdN2HsDAT7E0YkdwAVRP-GvACOfkl53nbehjhXvGbWB_geMs_6CRLOlTho9MKTGxe/s1600/cbyellow.png
Warna border #aca500


URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji-WVI3K2Vvca4GjpGFUn56o4pp9iui0BN8n0e8x7NBCg0ZiGjrxcPbL-dAd6R6VWPyGVdEuPs9DNGB778qgO0OVDiLBveQRMmYnpl_Gt22wmO1rzcNyK9pOBhtm2odtTs4E1vgTEfMOsq/s1600/cbred.png
Warna border #790909

untuk menggantinya cari tulisan background:url ganti kode nya dengan kode di atas atau kalo punya kode sendiri bisa di ganti dengan punya sendiri.

 Left Hidden Chatbox

<!-- left hidden chatbox by http://www.m-azka.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoEkvOgRzE4M07zPJBsl9EwlASSNfcQ7L4bQWRE-1b7JjsvW0X3XWDZRsaxi0iaZObVrkBUSdpNhCEJG5mV_9d3zsXOlFvc-JpKALNZa17oy8UbVF39UqqrEJGbANmbJpB8HZm43R7ke0/s400/cbred-LEFT.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"><!-- KODE SHOUTMIX ANDA DISINI -->

Right Hidden Chatbox

<!-- right hidden chatbox by http://www.m-azka.com/ START -->

<style>
#hcr {
position:fixed;top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {height:100px;width:30px;
float:left;
cursor:pointer;
background:url('http://b.imagehost.org/0611/buku-tamu.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"><!-- KODE SHOUTMIX ANDA DISINI -->