Cara menyembunyikan shoutmix chat dikiri dan kanan blog (ChatBox Hidden)

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

<!-- left chatbox hidden from http://lovelizzers.blogspot.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">

MASUKAN KODE SHOUTMIX DISINI

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<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>
<!-- left chatbox hidden from http://lovelizzers.blogspot.com/ END -->

Untuk ChatBox Hidden Kanan

<!-- right chatbox hidden from http://lovelizzers.blogspot.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">

TARUH KODE SHOUTMIX DISINI

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<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>
<!-- right chatbox hidden from http://lovelizzers.blogspot.com/ END -->

6. Klik Simpan dan Selesai..

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

Label/Kategori: Tutorial Blog

Baca Terkait Lainnya..