Tutorial : Hide Shoutbox

Hide Shoutbox ni satu trend dalam blog ni. Semua orang suka sorok dah sekarang. Hehe~ Tapi ada mereka2 yang baru tak tahu macam mana nak sorokkan benda ni. Okay2 kejap lagi aku ajar ye.

Selain tu, ada juga yang tanya aku macam mana nak tukarkan button shout tu. Memandangkan aku ada kongsian design button shoutbox ni, aku ajarkan sekali macam mana nak letak benda tu ye. Jadi mari lah jengah2 kat blog aku yang tak seberapa ni.

Macam biasa anda kena lah pergi ke:

Dashboard > Design > Page Elements > Add a Gadget

Lepas itu, pilih HTML/JavaScript

Lepas tu pastekan code dibawah ini didalam kotak yang disediakan :

<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('http://img141.imageshack.us/img141/7840/janganxjerit1.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">

Gantikan text ini dengan URL ShoutBox anda!

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close/tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Nampak tak tulisan merah yang cantik tu? Gantikan code Shoutbox anda disitu. Tak semestinya guna Shoutmix, Chatbox, Facebook link ke ape pun boleh pastekan code kat situ ye.

Ha! Nak tukarkan button Shout tu? Nampak tak URL gambar warna oren tu? Tukarkan link URL tu dengan link URL yang anda nak. Lepas tu tekan Save.

Preview dulu untuk lihat jadi ke tidak. Kalau tak jadi, atau ada sebarang masalah tanyalah ye. Terima kasih. Hehe~ Selamat berblogging!