Sha's Daughter :: ordinary typewriter

Sorokkan Shoutbox
Monday, November 7, 2011 | 3:39 AM | 0 comments
  Salam... uolls :)


Hari 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...




hello cute stalker(s) ! I'm owner of this. just be nice here. then I will nice with you #byOwner
[ Facebook | Twitter | Formspring } About Stuff




template by: Sha's daughter
editor: your name here
Doodle: tumblr
Software: AP CS5


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