TUTORIAL HIDDEN SHOUTBOX

assalamualaikum w.b.t wahai bloggers sekalian alam!!hohoho..sekarang saya nak berkongsi sikit ilmu pengetahuan dengan korang semua tentang hidden shoutbox atau dalam bahasa ibunda kita,shoutbox menyorok..sebelum nak buat shoutbox menyorok nie mesti la kena ada kod shoutmix..pastu create la shoutbox anda mengikut kreativiti..ok!malas saya nak menaip panjang-panjang sebab bukan korang nak baca pun...huhuhu..JOM KITA MULAKAN TUTO!!

1)login blogspot>design>layout>page element>add gadget>HTML/javascript

2)copy kod di bawah dan pastekan di HTML/javascript.

<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://i1123.photobucket.com/albums/l559/husna209/hijau1.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 CODE SHOUTBOX KORANG KAT 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>

yang warna merah hati kod shoutmix yang korang.
yang warna merah tu boleh letak gambar apa-apa pun tapi yang di editkan la menggunakan photoshop la..tapi kalau korang malas atau tak da photoshop korang boleh merayau kat blog orang yang ada buat tutorial shoutbox ambik je image diorang yang telah tersedia tapi kalau korang malas jugak korang boleh je ambik yang saya sediakan dibawah tapi simple-mimple je la..

http://i1123.photobucket.com/albums/l559/husna209/t-merah.png

http://i1123.photobucket.com/albums/l559/husna209/t-kuning.png

http://i1123.photobucket.com/albums/l559/husna209/t-navy.png

http://i1123.photobucket.com/albums/l559/husna209/pinkcair.png

http://i1123.photobucket.com/albums/l559/husna209/oren.png

3)save!kalau tak jadi bagitau!
*boleh jugak ubah lebar atau ketinggian mengikut keselesaan

credit to:mr.aizuddin