Tutorial Buat Tab Menu~ Macam DI Sidebar Blog Ini

Salam. 

Seorang member sekolah/matrik aku  bertanya aku cara nak buat tab menu di Formspring~ Sila lawat blog beliau. Penuh dengan fikiran-fikiran yang menyeronokkan hehe~

Ini dia tab menu~ Boleh letak banyak-banyak widget dalam satu kotak. Memang jimatkan ruang haha~

Langkah 1 :

Masuk HTML blog.
Sila savekan html blog anda. Back-up orang kata.

Langkah 2 :

Klik Alt + F. Dalam kotak 'find' tue type ini </head> kemudian tekan enter.

Langkah 3 : 

Salin kod kat bawah nie dan pastekan kat atas atau sebelum kod </head>

<link href=' http://sites.google.com/site/javascript10/jquery.ui.all.css' rel='stylesheet' type='text/css'/>

<script src='http://sites.google.com/site/javascript10/jquery.js' type='text/javascript'/>

<script src='http://sites.google.com/site/javascript10/jquery-ui.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function(){

$(&quot;#tabs&quot;).tabs();

});

</script>

Ok. Klik Save Template Korang.

Dah setel bahagian HTML. Sekarang masuk bahagian added element di Javascript/HTML.

Langkah 4 ( nie yang pening sikit! ) : 

Copy script di bawah dan paste di notepad atau lain.

<div id='tabs'>

<ul>

<li><a href='#fragment-1'><span>Title 1</span></a></li>

<li><a href='#fragment-2'><span>Title 2</span></a></li>

<li><a href='#fragment-3'><span>Title 3</span></a></li>

</ul>

<div id='fragment-1'>

Masukkan teks, link atau script anda disini 1

</div>

<div id='fragment-2'>

Masukkan teks, link atau script anda disini 2

</div>

<div id='fragment-3'>

Masukkan teks, link atau script anda disini 3

</div>

</div>

Amaran~ yang perlu diubah hanya yang color merah!! Boleh copy script di atas dan ubah di notepad atau lain-lain.

Ok untuk title 1,2 dan 3 tue~ korang punya tajuk, macam aku punyer 'popular' dan 'shoutbox'

Bagi Masukkan teks, link dan script~ Korang kena ikut nombor~ Kalau title 1 korang shoutbox, maka bahagian masukkan teks, link dan script 1 haruslah letak script untuk shoutbox~

Langkah 5:

Masuk Page Element ---> Add Gadget ----> Copy script yang korang dah ubah tadi dan pastekan di HTML/javascript.

Save. Siap!!

p/s : penat jugak buat tutorial nie~
p/s : kalau tak dapat buat~ bolehlah tanya aku lagi, kot3 aku boleh tolong~

Salam.