[tutorial] shoutbox di tepi..

ok..skang bagaimana utk buat shoutbox korg dispplay mcm yg ak wat kt sni...

Sebelum pape ak nk tekankn kt ats keybord ni..dh tekan nih..haaa.. actualllly script ni bkn lah di invent oleh aku..sbnarnyer aku pn copy paste cme ak ade improve skt2 j...so korg blh la copy paste gk n then wat something about it..lalala

(this tutorial should be credited to aizuddin @ aizuddin.com)

ok2 xyh nk melalut byk ak terangkn kaki per kaki care tuk bwat bende alah kt tepi tu...

first jejak  adalah dengan korg memklik button design kt dashboard korg...pastu kt tab design klik la plak edit html...sng2 pgi kt edit html j la...hehe

pastu korg tkan kt skate key board korg mende ni : Ctrl+f pastu type la "body" (tanpe double quote tu)..tkan enter 2 kali...

ok skang kt dlm textare kt bwh skt edit template tu korg ade nmpk body nye prkataan highlight kn...kt situ la kite akn add something...

BUT before u try to make some changes, i recommend u to backup your template just becouse disaster dont smell (pergh ayat kalah bdk tadika.. =)) )

care backup adalah : klik "Download Full Template" mcm kt bwh ni... n then save la kt mane2 yg korg ske aslkn xmsuk tong sampah...

dh slesai bab tu, so skang kite truskn niat murni korg utk wat shoutbox mcm yg ak punyer ni...

kt sini ade due tmpat perlu di add...1st, ad nmpk "" kn kt ats "" tu? so copy code kt bwah ni dan paste kt ats "" tu...

<style type='text/css'>

#gb{

position:fixed;

top:130px;

z-index:+1100;

}

* html #gb{position:relative;}

.gbtab{

height:231px;

width:40px;

float:left;

cursor:pointer;

background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtZSUdZWVJbsn8QVhrF9Cfpqsn2EoC0_MSC2jFVqHWDyv_6ot5deOzZknvKkOV1EcJflAd5XUYnbc9j3YybVNRcgdomCmVnSKTSHsO-S5XmeOQLijfgeZjhUB1TM8FFItuJj4sK8qQkSAl/s1600/shout.png&#39;) no-repeat;

}

.gbcontent{

float:left;

border:2px solid #666666;

background:#F5F5F5;

padding:10px;

}

</style>

 so skang utk 2nd edit adlh copy paste code kt bwah ni and then paste kt bwah ""..

<script type='text/javascript'>

function showHideGB(){

var gb = document.getElementById(&quot;gb&quot;);

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(6-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById(&quot;gb&quot;);

var dx = Math.abs(x0-xf) &gt; 6 ? 3 : 1;

var dir = xf&gt;x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.right = x.toString() + &quot;px&quot;;

if(x0!=xf){setTimeout(&quot;moveGB(&quot;+x+&quot;, &quot;+xf+&quot;)&quot;, 6);}

}

</script>

<div id='gb'>

<div class='gbtab' onclick='showHideGB()'/>

<div class='gbcontent'>

Letak kt sini korg punyer shoutmix @ shoutbox code

<div style='text-align:right'>

<a href='javascript:showHideGB()'>

[close]

</a>

</div>

</div>

</div>

<script type='text/javascript'>

var gb = document.getElementById(&quot;gb&quot;);

gb.style.right = (30-gb.offsetWidth).toString() + &quot;px&quot;;

</script>

 dah siap...hehe

Perhatian :

1. Tukar tab..
Korg bwat lawa2 kt photoshop { height:231px; width:40px; } pastu korg hostkn kt mane2..mcm kes aku gne blog ni je...carenye same cm ko upload gmba di blog just copy url j...pastu :

Cari (ctrl+f) perkataan background :url > Tukar url original image  dengan url image yang korang nak.

2. Tukar ketinggian

Cari perkataan top, dan tukar kepada ketinggian yang korang nak. Contoh 10px, 20px,30 px…

3. Tukar saiz

Tinggi : tukar nilai dekat height. Contoh 10px, 20px,30 px…
Lebar : tukar nilai dekat width. Contoh 10px, 20px,30 px…

p/s : akn dtg mgkin klu ak ade mase ak tlg design kn tab2 yg cntik mantik utk korg..tp tu lah klu ak rajin lah ea..hehe

klu ade mslh ley j comment kt bwah ni..nti ak try edit lg lawa...klu korg nk ak ley send kn code k email korg...