Jumaat, 16 April 2010

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.

3 ulasan:

s A i F u L z A k W a N ® berkata...

waaa...tq bnyk2 azuan..
sgt mmbntu..hehehe
tp bende ni aq wt time cuti la kot sbb skrg ni bzy nk exam kn..

anyway..i really apareciate what u did so much..siap boh link lg tu..

tq my fwen..(^_^)

miss nina berkata...

pls do visit my blog
rasanya ada something yg tak kena dgn code tu. tak appear lak tab menu n kandungannya, huhu

~salam (blogwalking mode)

miss nina berkata...

pls do visit my blog
rasanya ada something yg tak kena dgn code tu. tak appear lak tab menu n kandungannya, huhu

~salam (blogwalking mode)

BLOGGING

Get this widget

FILEM @ MOVIE

Get this widget

DOWNLOAD

Get this widget
Related Posts Plugin for WordPress, Blogger...