Cara Memasang ChatBox Hide Show Kanan/Kiri di Blog anda

Halo sobat Mazkac kali ini saya akan membahas Cara memsang ChatBox Hide Show berada di kanan blog anda atau berada di kiri blog anda. Tadi saya sudah update Cara membuat chat kotak chatting Shoutmix tetapi kali ini saya hanya menerangkan untuk memasang ChatBox Shoutmix berada di kiri/dikanan blog anda.

Saya melihat banyak comment di blog blog lain , "Gimana cara Chatbox Shoutmix berada di kiri blog ?" itu comment yang saya sering lihat, maka dari itu saya akan share cara memasang Chatbox berada di kanan maupun di kiri.

Langsung aja ya ke langkah langkahnya..

Script kotak chating tersembunyi ini mempunyai 2 macam yang pertama script kotak chating tersembunyi di kiri dan yang kedua di kanan.

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/AVvXsEiaalNSPX7dqU4Za2tVMEP2CihEDi13lI9GnbgItl9LfNDITVrN3E_yccIf-brcF9hXiaUaw4j6QkFDKD57dWX9-maHUuu9lLESHUokvJqlEiHvp5Iia_vWdELsEUxlagkUNJnRko1mqqY/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 -->

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->

<span style="font-size: 100%;">
<span style="color: red;"> Get this</span>
<a href="http://www.m-azka.com/2011/02/cara-memasang-chatbox-hide-show.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Desaign1</span>
</a>
<span style="color: red;"> or</span>
<a href="http://www.m-azka.com/2011/04/membuat-floating-widget-chatbox.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Desaign2</span></a></span>
</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 hidden chatbox by http://www.m-azka.com/ END -->

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

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->

<span style="font-size: 100%;">
<span style="color: red;"> Get this</span>
<a href="http://www.m-azka.com/2011/02/cara-memasang-chatbox-hide-show.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Desaign1</span>
</a>
<span style="color: red;"> or</span>
<a href="http://www.m-azka.com/2011/04/membuat-floating-widget-chatbox.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Desaign2</span></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 hidden chatbox by http://www.m-azka.com/ END -->

(UPDATE : 10 MEI 2011)

Keterangan:
Kalau Belum Punya Masuk Ke sini : Cara membuat Chat / Kotak Chatting Shoutmix 
#hcr {
position:fixed;top:100px; /* Menunjukkan bahwa jarak tab dari atas adalah sejauh 100px. Bisa anda ganti dengan bottom:100px yang berarti jarak tab dari bawah menjadi sejauh 100px */
z-index:+1000;
}
.hcrtab {height:100px; /* tinggi tab pembuka hidden chatbox */width:30px; /* tinggi tab pembuka hidden chatbox */
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4UTO37BHfIN_i9N8AIPfPXleEACi7EkDiOsXHOjdnjDZp5cQUg-wojzPqQUetolGQTHaN8ovoWno_0VtK9_5OU-r1_tmXKew4nAp4sg_SdKZHUVvZY-9p3SEXyHUINLRUhfVeTR3OoT8/s400/cbblue.png') no-repeat; /* gambar yang dijadikan sebagai tab pembuka hidden chatbox */
}

.hcrcontent {
float:left;
border:2px solid #003e82; /* warna dan ukuran border hidden chatbox */
background:#f3f6f7; /* warna background hidden chatbox (tidak perlu diganti jika anda mengedit kode lain pada style) */
padding:10px;
}


Copy kan script di atas 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, ENJOY !!


* Seperti apa tampilannya ? 
+ Akan seperti ini hasilnya, Lihat SS berikut :

NB : Untuk mendapatkan Kode Shoutmix Masuk Ke Cara membuat chat kotak chatting Shoutmix .

UPDATE 16 APRIL 2011:
Berikut ini adalah keterangan-keterangan kode yang mungkin akansedikit membingungkan anda, tapi akan saya bantu jika adakesulitan didalamnya:
1. top:100px adalah keterangan jarak icon hidden chatbox dari atas (top) sejauh 100 px
2. height:100px adalah tinggi (height) tampilan icon hidden chatbox yang sebesar 100 px
3. width:30px adalah lebar (width) tampilan icon hidden chatbox yang sebesar 30 px
4.background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4UTO37BHfIN_i9N8AIPfPXleEACi7EkDiOsXHOjdnjDZp5cQUg-wojzPqQUetolGQTHaN8ovoWno_0VtK9_5OU-r1_tmXKew4nAp4sg_SdKZHUVvZY-9p3SEXyHUINLRUhfVeTR3OoT8/s400/cbblue.png') no-repeat adalah icon hidden chatbox yang akan berguna untuk menampilkan chatbox yang disembunyikan
5. border:2px solid #003e82 adalah warna (solid) dan ukuran border yaitu #003e82 dan border sebesar 2 px
6. background:#f3f6f7 adalah warna background pada chatboxsaat ditampilkan

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/AVvXsEhXvBQFJq_3Qqm2-KAlJntwjgP8ut5Bn3PBun68m_Gvs2vbQPHKUQeMULM5fy_1x-ip2l8G4aoNi6HomIsW0FisrWscAlLL_OC9y53YMsxFas7DVZv_pjvyAiRnTofDGpY6LuyZlPhedFTI/s1600/cbblue-2.png
Warna border #0079a0


URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE1rc9r_sseT6kjio_rIxjNKwXoAcoS8Ns_BL57Qeo7HdYPVb-KEHBkZd80x35T1xnZbo9xtY841A49kp-R_cm_biPZ76dW5O4pp5cou8WJlRtCBplWEkL3_7TL3JPOcgjYOceWjkqiylY/s1600/cbblue.png
Warna border #003e82


URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyQVHBUXekRF0tDArLqF2puwNqnaZkL9zoSb-6ybpjCBzJ1JMEF5pDzVpZWkUbxOYZlWPdb93Dp7dbG_jWiCakTd3J7r9jKrZQUYvgxh3HLfhaJY_uJYf8X5nUDv9D0QiCCpRdjz32dw8b/s1600/cbgreen.png
Warna border #008232






URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWz7vJCkFkFY8BM5LiiIRNgb0UOTCghXk1AJPzI6GkgXQaVK-pwBnhlsBtHAYfjUly_7pMmtZ6-N9T08mL1EZm7itomKrJTcNuy9R0HpUwyxkK9DxOfyA4minKPKDWBJE_urRBren-LWBM/s1600/cbyellow.png
Warna border #aca500


URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjM1LZqc5MSkvQioAl4oSP_VNwDLm3eAbxvqEQoqe6fiaUkH4MmQBqH0jZSuOSWkfOdkh9adD1lgG4rAyCjG01I2_gXhMIUt6yWecemRTv9MToG02Ark1t4r3rHV_qVd0zLZBGmcn4oJcd/s1600/cbred.png
Warna border #790909