Hari ini nak buat tuto untuk tambah shoutbox kat blog. Penting untuk blogger baru macam saya ni. Al-maklumlah traffic tak berapa nak ada..huhuhu...check it out...
1. Daftar masuk blog masing-masing
2. Klik dashboard > Design > Layout > Add gadget > Copy paste code dibawah kat HTML/JavaScript > Save
Copy code 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://img97.imageshack.us/img97/6060/ungucair.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#B89AFE;
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">
Copy code yang anda dah daftar kat shout box kat line ini
<div style="text-align:right">
<a href=" http://deadollixious.blogspot.com/2012/10/tutorial-hidden-shoutbox.html "><font size="2"">click to get this widget</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>
Nota Penting :
* Tulisan warna merah untuk warna Shout Box. Kalau nak ungu, boleh je terus guna yang ada tu.
* Tulisan warna biru untuk latar belakang Shout Box. Saya pilih ungu je. Kalau nak tukar kat sini.
* Tulisan warna hijau untuk link Shout korang sendiri. Kena daftar dulu kat sini untuk dapatkan code.

http://img846.imageshack.us/img846/6586/tnavy.png

http://img267.imageshack.us/img267/5049/tmerah.png

http://img560.imageshack.us/img560/7910/tkuningo.png

http://img829.imageshack.us/img829/127/pinkcair.png

http://img710.imageshack.us/img710/7861/pinkkg.png

http://img36.imageshack.us/img36/3569/orenx.png

http://img84.imageshack.us/img84/6496/hijau.png

http://img97.imageshack.us/img97/6060/ungucair.png
* Tulisan warna hijau untuk link Shout korang sendiri. Kena daftar dulu kat sini untuk dapatkan code.
Pilihan warna Shout Box yang lain

http://img846.imageshack.us/img846/6586/tnavy.png

http://img267.imageshack.us/img267/5049/tmerah.png

http://img560.imageshack.us/img560/7910/tkuningo.png

http://img829.imageshack.us/img829/127/pinkcair.png

http://img710.imageshack.us/img710/7861/pinkkg.png

http://img36.imageshack.us/img36/3569/orenx.png

http://img84.imageshack.us/img84/6496/hijau.png

http://img97.imageshack.us/img97/6060/ungucair.png
Dah pilih dan gantikan dengan warna dan link shout box korang, save. Selamat mencuba!