Cara Masang Chatbox Hide Kanan/Kiri Pada Blog

Posted by : Anonymous

Halo Teman Semua Pada Postingan Sebelumnya kita membahas tentang buat kolom chat, bagi yangbelum tahu tentang membuat kolom chat klik disini.Pada postingan kali ini kita membahas cara akan membahas cara ngehide kolom chat.
Berikut caranya :

Tentunya buka blog anda
Pilih Rancangan > Edit Laman >Tambah Gadget
Copykan code berikut :

<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/AVvXsEhEYG0fng9fEqAiZIRcPOCwEgt1ei298ZGwKdPyZeYVUh9mpDDvmybSlyhIIDGy5NDgpVuz_rN-ZmwAZWFXrnu1XiHOpBD_nYzsNee7_J7QigXVHAEdSeGAbhDYyjdtKc6HzZaFBGfb4IA/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">



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


Widget By <a href=http://db21blog.blogspot.com/2011/03/cara-masang-chatbox-hide-kanankiri-pada.html target="_blank"> Devil Bat 21 </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>