Selamat malam sodara-sodara sekalian para pengunjung nightwalker team di manapun anda berada ! huehuehue 
~~ . Jika anda sering mengunjungi website2 portal seperti yahoo.com , facebook.com atau website2 portal lokal seperti metrotvnews.com , detik.com , indowebster.com anda tentu melihat tab2 menu menarik pada halaman yg ada di website2 tersebut .
Menu2 yang penulis maksud kan disini adalah menu2 yang ketika tab tersebut di klik dia tidak berpindah halaman ataupun meload seluruh halaman , melainkan hanya berpindah dari bagian content satu ke content yang lain nya pada halaman yang sama . (bingung ? minum dong obat anti bingung ! :-q~~)
Untuk lebih jelasnya , anda dapat melihat contoh2 tabs nya di bawah ini :
Tabs ini salah satu fungsi nya adalah menghemat ruang pada sebuah halaman website , sehingga membuat sebuah halaman website terkesan lebih rapih , dan scrollny tidak memanjang kebawah . Anda tentu melihat bagaimana website2 raksasa seperti yahoo , detik , indowebster , Nightwalker team(<-++ raksasa ga ya ? 
) dll pada halaman home nya menyediakan banyak sekali cuplikan2 berita , video , ataupun gambar .
Bayangkan jika kesemuanya itu di tampilkan tanpa menggunakan tab2 seperti yang kita bahas ini , scroll ny di jamin puanjang buaaaanget dahh , huehuehe .. ~~ . Dan tentunya membuat pengunjung merasa malas , letih , resah , gundah , dan enggan untuk melihat konten yang disajikan xixixixi ~~ .
Ok , kita langsung saja pada bagian intinya . Untuk dapat membuat tab menu ini , kita memerlukan library jquery yang dapat anda download langsung dari website resminya yang ada di http://jqueryui.com/download .
Jika sudah barulah kita dapat mencoba mempraktekan nya . Untuk cara pembuatan nya , anda dapat memasukan script jquery yg telah anda download tadi kedalam sebuah halaman web yang anda ingin berikan tab jquery ini . Kemudian ketik value id yang anda inginkan bserta fungsi tabs jquery nya . Setelah itu anda tinggal membuat tag div pada bagian body dengan value id yang sama .
Berikut ini contoh tab sederhana yg penulis buat :
<html>
<head>
<script src=”jquery-1.3.2.min.js”></script>
<script src=”jquery-ui-1.7.3.custom.min.js”></script>
<link rel=”stylesheet” href=”jquery-ui-1.7.3.custom.css”/>
<script>
$(function(){
$(‘#bufferdie’).tabs();
});
</script>
<style>
body { font: 11px Geneva, Verdana, sans-serif;
line-height: 16px; }
#rapihin {
width: 600px;
margin: auto;
}
</style>
</head>
<body>
<div id=”rapihin”>
<div id=”bufferdie”>
<ul>
<li><a href=”#bufferdie-1″>Wall</a></li>
<li><a href=”#bufferdie-2″>Info</a></li>
<li><a href=”#bufferdie-3″>Photos</a></li>
<li><a href=”#bufferdie-4″>Boxes</a></li>
</ul>
<div id=”bufferdie-1″>Konten 1 ny disini …………</div>
<div id=”bufferdie-2″>Konten 2 ny disini …………</div>
<div id=”bufferdie-3″>Konten 3 ny disini …………</div>
<div id=”bufferdie-4″>Konten 4 ny disini …………</div>
</div>
</div>
</body>
</html>
Contoh diatas merupakan contoh sederhana tentang penggunaan jquery tabs , silahkan anda kembangkan lagi .
Untuk anda yang ingin mempelajari nya lebih dalam , anda dapat menuju ke website resmi jquery nya di http://www.jquery.com .
Untuk melihat demo dari contoh sederhana di atas anda dapat menuju ke link berikut ini : DEMO
Download script lengkapnya pada link berikut ini : DOWNLOAD
Sebagai tambahan , JQuery tabs plugin ini menggunakan JQuery UI CSS framework untuk pengaturan layout dan tampilan nya . Sesuai dengan dokumentasi JQuery tabs plugin dari website resmi nya , penulis me-rekomendasikan penggunaan ThemeRoller tool untuk memudahkan anda dalam membuat tampilan dan pengaturan layout nya yang cocok dan sesuai dengan selera anda .
Namun , bagi anda yang ingin mengkostumisasi CSS nya secara manual anda dapat mengedit file stylesheet yang terdapat pada file download diatas . Untuk dasar class2 CSS yang dapat anda kostumisasi disana diantara nya adalah : .ui-widget-header , .ui-tabs , .ui-tabs .ui-tabs-nav , .ui-tabs .ui-tabs-panel , dll (silahkan anda lihat baris di bawah komentar /* Overlays */)
gimana gimana gimana ? tertarik untuk memasang nya di blog / website anda ? huehuehue .. 
mungkin sgitu dulu aja artikel yang penulis berikan pada kesempatan kali ini , akhir kata :
~Sampai jumpa pada artikel2 berikutnya ! xixixixixi .. ~~
Wah wah wah… keren nih… Tar coba daN insyaALLAH saya kembangin lagi…
wah omz bufferdie nulis artikel terus…
kalo bisa lebih banyak yang beginian…
biar saya ada inspirasi buat web saya,,,,,
siiippp , mantab
tu link demo nya benerin omz…ixxixixixixii
mantabh nie…
w jga lagi desain2 nie..hihihihi
maaf kalo pertanyaanya basic banget….
1. itu ada file “image” nya kalo gak salah di dalem file “DOWNLOAD”, itu nanti di upload juga ga?
kalo nanti ngelink kira2 bagian mana yang musti di edit?
Waouuuuuuwwww….semoga bertambah ilmunya….maju terus night-walker….
Wah mak nyusss nih, langsung dicoba..
Makasih kawan…
ini dipasang di blogspot bisa ato ndak mas??
fu
NIce Info gan……..
klo ada tutor tentang sortable jquery… minta dunk..
Thx!!
omm….
dalam satu page bisa banyak tab ga ???
monhon pencereahannya…..