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 menjalin hubungan  antara pemilik blog dan pengunjung blog dan akhirnya widget ini juga akan mendatangkan traffic untuk blog kita. 
 

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.Daftar  disini

2.  Setelah melakukan pendaftaran login ke akun 

3.  Lalu buatlah shoutbox sesuai dengan ke inginan lalu klik continue

 4. Selanjutnya anda akan dihadapkan dengan tampilan Code Shoutbox yang sudah di buat

5. Langkah berikutnya adalah Login ke akun Blogger

6. Pilih Tata Letak - > Add Gadget ->Pilih HTML/Javascript lalu paste code dibawah ini ke dalam gadget  tersebut tanpa diberi judul.

<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 kode 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>

7. Tingginya boleh diubah dengan menukar nilai 50px, sesuaikan dengan selera, dan ganti warna merah dengan script/kode shoutbox, warna hijau boleh diganti dengan url gambar yg dikehendakki 8. Klik save.