Tutorial Hide Shoutbox
Hey hey there, Assalamualaikum. Kali ni Ha nak buat tuto pasal ShoutBox. Bukan macam mana nak dapat ShoutBox. Tapi nak hide kat tepi. Bagi new bloggers, banyak jugak lha yang impress suka sangat. Ok sekarang Ha ajarkan Ok?
1. Dashboard > Design > Add Gadget > Html
2. Korunk copy code kat bawah niyh dulu....
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:350px;
width:140px;
float:left;
cursor:pointer;
background:url('URL PIC YANG KORUNK SUKA') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #00000;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 150-w) : moveGB(170-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 SHOUTMIX KORUNK 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 = (140-gb.offsetWidth).toString() + "px";
</script>
3. Lepas tu, copy code kat HTML Ok?
4. Yang Warna MERAH tu, korangcari pic mana2 yang ada tulis shoutbox Ok?
5. Then, masukkan kat dlm kurungan tu :)
6. Bagi yang warna BIRU , korang boleh tulis size tu, mengikut kesesuaian ;)
7. Preview & Save kalau jadi. Kalau ada masalah bagitahu kat Comment Ok?