Cara membina auto hide shoutbox

auto hide shoutbox

Salam semua.. hari ini saya nak ajar buat auto hide shoutbox. Ini semua saya belajar dari Nescafe Ais... hehehe siapa yang rajin tahu lah siapa dia kan... disamping itu juga saya membuat tutorial ini untuk seorang blogger yang bertanyakan bagaimana untuk membinanya. eja saiful...
Mula-mula yang penting anda perlu mendaftar dengan shoutbox supaya anda akan dapat code shoutbox tersebut. Setelah selesai baru kita akan memulakan ilmu untuk membina auto hide.. Saya pun belajar dari orang... kalau salah tolong bagitahu ek...

Langkah-langkah:

1. Log masuk ke blog => Dashboard => Layout => Add A Gadget. dan pilih HTML/Javascript.

2. Salin kod di bawah dan tukarkan 'Masukkan kod Shout Box di sini' dengan kod shoutbox anda.

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaB3ZtA6YlUNPHPgtnzt-K8w50Ktr5iXuiX0LovMAxXwz3XKdEokUAA2zuar1NJN-m1QFHXZ8UPT-iEf-OyBQF99Bi0_CHcKyOq54G59ZGNmjbp_BCxn-3rDYIDX3sEUh1MrhMyUL9lEtb/s320/tabs.png') 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">

Masukkan kod Shout Box di sini

<div style="text-align:right">

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

3. Klik preview dan jika semua ok.. save...

siap dah..