Klik Sini Untuk Tambah Ilmu

Recent Post

Slider Chat box

Holla, Do you have Chat Box or Shoutmix Chat? If you still do not have this, register first to proceed this tutorial. Slider CBOX bermaksud Chat Box anda bersembunyi di sebelah kiri atau kanan dan bila cursor klik pada icon CBOX akan sliding keluar. Berminat? 


Edit HTML >  Page Element > Add Gadget > Add HTML Code
Copy code dibawah dan pastekan dia dan jgn lupa masukkan kod CBOX anda.

<style type="text/css">
#gb{
position:fixed; right: 100px;
top:150px;
z-index:+1000;
}
* html #gb{position:relative;
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i.imgur.com/DEgb9.jpg?5653') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
Cbox/Shoutmix Code
<div style="text-align:right"><a href="http://advance-blog-user.blogspot.com/" target="_blank"><small>tutorial here</small></a>
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Savekan dia dan lihat hasilnya. Any concern lets me know!!!