Sorokkan Shoutbox
Monday, November 7, 2011 | 3:39 AM | 0 commentsHari nie nak buat tutorial sorokkan shoutbox kat bahagian tepi blog korang tu supaya dapat jimat ruang blog..hehehe. Shoutbox pun dah pandai main sorok-sorok tau. hehehe. Bila korang tekan gambar shoutbox tu baru dia muncul..
okey...
1. Log in tu Blogger..kalau tak macam mana nak sorok cik shoutbox tu kan..
2. Go to DESIGN > ADD A GADGET > HTML/JAVASCRIPT
3. tajuk biarkan kosong ya kawan-kawan
4. Copy code di bawah dan paste kat ruangan kosong tu..
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:180px;
width:71px;
float:left;
cursor:pointer;
background:url('URL GAMBAR SHOUTBOX') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #ffffff;
background:#ffffff;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 41-w) : moveGB(41-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">
KOD SHOUTBOX / CBOX KORANG DISINI
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close/tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (41-gb.offsetWidth).toString() + "px";
</script>
* ayat warna BIRU - URL gambar shoutbox tu maknanya gambar kat tepi shoutbox tu. URL korang boleh ambil kat bawah. Mira design khas untuk korang. Sorry la kalau tak segempak mana..
* ayat warna MERAH - letak code shoutbox korang kat situ.
* ayat warna HIJAU - korang boleh tukar height dengan width mengikut height n width gambar shoutbox korang. Kalau tak, nanti gambar macam kena potong
GAMBAR SHOUTBOX: Ambil la...jangan malu jangan segan. Mira buat khas untuk korang
![]() |
| http://i301.photobucket.com/albums/nn46/cuttysakura93/domo.png |
Height - 145px
Width - 71px
![]() |
| http://i301.photobucket.com/albums/nn46/cuttysakura93/Untitled-2-1.png |
Height - 182px
width - 49px
![]() |
| http://i301.photobucket.com/albums/nn46/cuttysakura93/vector2.png |
Height - 191px
width - 85px
5. Bila dah siap ubah itu ini.. tekan SAVE..dah siap...yeay!!!
Kalau ada masalah, comment tau. Kalau dah buat tutorial nie pun comment tau. Boleh mira tengok hasilnya.
**UPDATE!!!
kalau gambar shoutbox tu separuh,
tengok balik coding tu... cari code macam di atas.. Cuba tukar nombor tu. pastu review.. Kalau separuh lagi, tukar lagi.. sampai korang puas hati dan senang hati..
Selamat mencuba
semoga berjaya..
Sayonara...














BASIC BIO
Real Name: Nursyamila Suhaila Binti Zamvery
Age: 17 tahun
Born: Februari 20, 1995 Melaka, Malaysia
Hometown: Bangi, Selangor, Malaysia.
Education: Sekolah Menengah Kebangsaan Jalan Empat
Things I Likes: korean movie & music, art and blogging
Things I hates: attention seeker, a liar and childish act