Nampak tak kotak warna hijau kat tepi tu. Itu ialah Shoutbox yang disembunyikan di bahagian tepi blog.
Tutorial kali ini ialah macammana nak jadikan Shoutbox yang kita letak kat dalam blog ni tersembunyi. Kita letak secara tersembunyi ni nak meminimumkan ruang blog kita dan supaya nampak lebih kemas lah.
1. Log in blog => Dashboard => Layout => Add A Gadget. Seterusnya klik pada HTML/Javascript.
2. Salin kod biru di bawah dan paste di HTML/Javascript . Gantikan teks Masukkan kod Shout Box di sini dengan kod Shout box korang.
<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/AVvXsEiZvR43nl9_hMveqp6vGrImL0cN6ejOJFUC2uoCU-JjjTx5HdlJsvJGGCN391FCn5honSVFusc7zEwTf-0Zu52ERjZafvvnOAMYsOyXBXzXviQMRz0i0ywJ1teASPUd-lKpHhl5R8YW9jz6/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. Save dan Preview blog korang.
