memasang shoutbox tersembunyi

Shoutbox adalah suatu  widget yang penting ada di  blog kita,Dengan widget seperti ini membolehkan kita   berinteraksi dengan pengunjung blog kita. Dengan wujudnya interaksi ini akan menjalinkan hubungan  antara pemilik blog dan pengunjung blog dan akhirnya widget ini juga akan mendatangkan traffic untuk blog kita. 
Mungkin anda ingin menjimatkan ruang semasa memasang Shoutbox pada blog.Tip ini akan membantu anda untuk menampilkan shoutbox di halaman tanpa  memakan space/tempat, kerana widget ini  disembunyikan di samping Body blog.

Ikuti langkah berikut

1.Klick pada Design dan Pilih Add Gadget
2.kemudian pilih html/javascript dan Copy dan Paste kod di bawah ini

<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://i219.photobucket.com/albums/cc282/garam63/SHOUT.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
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">

Letakkan kod ShoutBox anda disini

<div style="text-align:right">
<a href="http://teknikbuatblog.blogspot.com/2010/04/shoutbox-adalah-suatu-widget-yang.html"><font size="1"">get this </font></a><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></div></div>

3.Tingginya  boleh diubah dengan menukar nilai 50px, sesuaikan dengan kehendak anda, dan gantikan perkataan yang berwarna  merah dengan script/kod shoutbox,bahagian teks hijau boleh ditukarkan dengan imej yg dikehendakki
4.kemudian klik save.

Posted in: Tutorial Blog