Shout box melayang di kiri [Edisi3]


          oke karena posting-posting sebelumnya saya sudah posting tentang widget shout box juga. dan di situ jga telah terdapat langkah-langkahnya ....





sekarang saya akan kasih code HTMLnya saja ya sobat ... :')




<!-- left hidden chatbox by http://www.sobatfauza.co.vu/ START -->

<style>

#hcl {

position:fixed;top:100px;

left:0px;

z-index:+1000;

}

* html #hcl {position:relative;}

.hcltab {height:120px;width:30px;

float:left;

cursor:pointer;

background:url('http://file-fauza.googlecode.com/files/Shout%20Box%20by%20Sobat%20Fauza.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">

Silakan Pasang Kode Buku Tamu sobat yang sudah di copy tadi Di Sini

<br />

<div class="hc-credit">

<span style="float:left">

<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->

<span >

<span > Get this</span>

<a href="http://www.sobatfauza.co.vu/2013/03/shout-box-melayang-di-kiri-edisi2.html" target="_blank">

<span class="Apple-style-span" > Desaign1</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.sobatfauza.co.vu/ END -->



 Note :
ganti tulisan warna Hijau di atas dengan html/javascript Cbox/buku tamu yang tadi....





Mudahkan Sobat...!!!

Semoga dapat bermanfaat....^^