(UPDATE) Tutorial ; Autohide Shoutbox anda.

selamat pagi.

ini hari nak cakap banyak pun tak boleh. sebab tak ada masa and tak dapat nak online lama lama sebab internet rumah ini macam ada sikit problem. HAHAHAHHAA benci T____________T

oh ramai tanya macam mana nak buat shoutbox autohide mcm tu. heh padahal dah ramai yang buat tapi tak apa, saja nak bagi anarm.net femes sekejap, ini tutorial dia.

pegi layout>page element>add gagdet ;

<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/AVvXsEiMYgfSafBq348LBB8f4fTgpBBYI0BoLf5eqBSvH9GtbK3JV6JB8c3iXU_zqSTAtcEmGftHOLiPb2GYdNnbNyBzE9BmMprtiFvAyeKimU6Zk1oB2CP7lGy8qU0TS3yirBSajQzVeWC98CkR/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 CODE SHOUTBOX KORANG KAT 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>

Note :

• 50px untuk setkan kedudukan shoutbox korang. Semakin tinggi nombor yang korang setkan, semakin ke bawah lah korang punya shoutbox tu.
• color pepel itu masukkan code shoutbox :)

**Read more / credit: anarm.net ( tutorial sorokkan shoutbox )

**Tab warna berlainan : pisyek.com ( tukar tab kaler lain )

** nak lagi kacak boleh usha : nazrien.com

*untuk ubah color and word, guna photoshop ke apa tah serius aku malas nak buat sbb tu aku guna yang pisyek punya saja :D

selamat berhujung minggu :)