Da lame tak post ! Selame ni aku sedang design blog ni!!

Ok! Ok! Aku nak sambung tutorial untuk ShoutBox !

Hari ni, aku nak ajar untuk tukar Tabs pada ShoutBox korang yang dah sedia di tepi tu ~

Ha ! Yang tu!

OK! Sebelum tu, korang dah sorokkan shoutbox belom? Maksud aku, buat pop-ups untuk Shoutbox.. 

Kalau belum, meh tgok kat sini dulu : Macam Mana Nak Sorokkan ShoutBox tu?

Dah buat? Woke! Proceed~

Actually, member aku nak suruh aku tunjukkan cara nak buat ni dulu.. jadi aku dah siapkan tutorial (dlm bentuk gambar) ni awal2~

So, korang tgok sini lah :

Er.. nampak sgt ke loghat Melaka ni? Melaka ade loghat ke?

Tak nampak ?

Woke, aku tunjukkan :

Pg ke : Dashboard --> Design --> Page Element --> Gadget (ShoutBox korang yang dah sedia ada tu)

  Korang boleh gune CTRL + F untuk cari code ni :

 gbtab{ height:100px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjffqnrxs3k09kF8FVoZYG26jaBDJysUQ-35QMhygd166NDaCTts7VIMbti9edmKv0ALHOS87rOh_oczodkkhnXrCky03HG5Avb7Ev_UODFrh8P4zGaK5G9l5gNJQIKk3tFPpw9FT-101Id/s320/tabs.png') no-repeat; }

Merah : Pastikan scroll tu ade bahagian atas ~ so, tak de lah tertukar URL nanti (pada gambar)

Hijau : Adjust kat situ mengikut dimension Tab yg korang dah design 

Pink : Paste kan URL Tab yang korang dah upload ~ ( Lebih senang korang Upload kat Photobucket and copy URL kat Direct Link)  

Paham? Paham? Paham?

#ShoutBox Tab tu korang boleh dapat kat mana2 atau design sendiri.. boleh jugak Search kat Google Images HEHE! Ok~ tu je !  Jangan lupe click Save yeah!

                                                                             
                                                                                           by :

Kelebihan menyorrokkan shoutbox, dapat mengurangkan berat page bile loading!
So :
Sorrokkan shoutbox macam mana?
Sini aku buat tutorial , meh ikut!

• Firstly, Dashboard --> Design --> Page Element --> Add Gadget . Pastu copy/paste kod kat bawah ni! 

<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjffqnrxs3k09kF8FVoZYG26jaBDJysUQ-35QMhygd166NDaCTts7VIMbti9edmKv0ALHOS87rOh_oczodkkhnXrCky03HG5Avb7Ev_UODFrh8P4zGaK5G9l5gNJQIKk3tFPpw9FT-101Id/s320/tabs.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 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>

• Ok! Lepas tu nampak tak *MASUKKAN CODE SHOUTBOX DI SINI* ?? Ha pastu masukkan la code shout box korang yang mmg dah ade tu~ !
• Pastu tekan Save

Ni contoh yg aku dah buat la :

Background Pink kat blkg ShoutBox aku ni x termasuk dlm HTML di atas ye!

OK! Selamat Mencuba !!!!