COLLAPSIBLE TAB VIEW

Mungkin dari teman-teman sudah pada mengenal dengan TAB VIEW!!! Nah itu bener sobat, yang berbentuk tabel satu bisa ada beberapa isinya. Hihihi...kayak apa ajah nih neranginnya +_+. Contoh yang ada di blognya BeBeN Prodigy of Head yang berada di bagian bawah blog ini sebelah kanan kawan's (Pojok kanan). Nah kenapa sekarang BeBeN mau capek-capek lagi memosting tentang Tab View ini. Ada yang istimewanya dong. Trik ini menggunakan script Ajax, Jquery yang telah tersimpan di directorynya si-embah GooGle.Tidak perlu capek-capek dong ah...heuhueheuhue. Dan yang istimewanya lagi, CSSnya ada macam-macamnya sobat blogger. Lets CEK GET DOT, how to do that .

1. Log in ke account Blogger sobat ---> Layout ---> Edit HTML ---> Download Full Template. Takut ada apa-apa gito loh dijalan...xixixixi ^,^.
2. Cari kode berikut </head>, dan masukkan kode dan script berikut sebelum/diatas kode yang tadi.
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.core.js"></script> <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.tabs.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#tabs").tabs(); }); //getter var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions'); //setter $('.selector').tabs('option', 'ajaxOptions', { async: false }); </script> <style type='text/css'> .ui-tabs-selected a { background-color: #FE9A2E; color: #000; font-weight: bold; padding: 2px 8px 1px; border-bottom: 1px solid #fff; border-left: 1px solid gray; border-right: 1px solid gray; margin-bottom: -1px; overflow: visible; } #fragment-1 { background: #FAAC58; //Background warna dari content area 1 (tab 1) color:#FFFFFF; //Warna text content area 1 (tab 1) margin-top:2px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; } #fragment-2 { background: #ff6500; //Background warna dari content area 2 (tab 2) color:#FFFFFF; //Warna text content area 2 (tab 2) margin-top:2px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; } #fragment-3 { background: #666666; //Background warna dari content area 3 (tab 3) color:#FFFFFF; //Warna text content area 3 (tab 3) margin-top:2px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; } #fragment-3 a { color:#FFFFFF; //color of HYPERLINKS in content area 3 (tab 3) } </style> <!--COLLAPSIBLE-MULTI-TABBED-WIDGET-STOPS-HELP-@-http://bloggerstop.net RE-PUBLISHED-@-http://beben-koben.blogspot.com-->
Kode CSS yang berwarna biru, kode untuk Tabs yang bagian atas. Kode CSS yang berwarna merah, kode untuk tabs bagian bawah (isi dari content).
3. Masuk ke halaman Layout ---> Page Elements ---> klik Add a Gadget ---> pilih yang HTML/JavaScript.
Masukkan kode berikut ini teman :<div id="tabs"> <ul> <li><a href="#fragment-1"><span>Judulnya?</span></a></li> <li><a href="#fragment-2"><span>My Pictures</span></a></li> <li><a href="#fragment-3"><span>Recent Posts</span></a></li> </ul> <div id="fragment-1"> <span style="text-align: left;"> <p>Silahkan mau diisi apaan nih terserah!!!</p> </span> </div> <div id="fragment-2"> <center><a href="http://tinypic.com" target="_blank"><img src="http://i38.tinypic.com/2n0j12a.jpg" border="0" alt=""></a></center> </div> <div id="fragment-3"> Content of Tab #3 <br/><span style="font-size: xx-small;"><a href="http://bloggerstop.net" target="_blank">Blogger Widgets</a> <a href="http://beben-koben.blogspot.com/" target="_blank"> Re Published : Prodigy of Head</a></span> </div> </div> Kode yang berwarna biru silahkan diganti menurut kebutuhannya masing-masing, sedangkan kode yang berwarna merah adalah isi yang mau diisi oleh kawan's terserah dweh ah ah ah ^.^. Nah sampai disini ajah sebenarnya sudah jadi deh sebuah Tab View yang keren. Hehehe... Demo untuk yang biasa (no special) : D E M O.

Tadi kan BeBeN bilang ada yang istimewanya!!! Apa...an tuh yang specialnya. Pake telorkah, pake kejukah, pake coklatkah,...wkwkwkwkwk emangnyah mau bikin Martabak. Okeee...lanjut sob fiuh!!!

Masih ingat dengan langkah urutan nomor 2 yang diatas!!! Disitu ada kode CSS yang ditulis bersama dengan script, kita hilangkan kode CSSnya teman. Dan kita konsentrasi hanya pada script.

<link type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
//getter
var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');
//setter
$('.selector').tabs('option', 'ajaxOptions', { async: false });
</script>

////////////////////// KODE CSS YANG DIMAKSUD //////////////////////

<!--COLLAPSIBLE-MULTI-TABBED-WIDGET-STOPS-HELP-@-http://bloggerstop.net RE-PUBLISHED-@-http://beben-koben.blogspot.com--> Perhatikan script yang BeBeN kasih warna Ungu, nah itu yang istimewanya sobat blogger. Dengan hanya mengganti script tersebut kita dapat memilah dan memilih theme yang diinginkan. Berikut jenis script dan screen shotnya. Lets CEK GET DOT :

1. Swanky Purse
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/swanky-purse/jquery-ui.css" rel="stylesheet" /> Screen shot :
2. Trontastic
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/trontastic/jquery-ui.css" rel="stylesheet" /> Screen shot :
3. Black Tie
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/black-tie/jquery-ui.css" rel="stylesheet" /> Screen shot :
4. Mint Choc
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/mint-choc/jquery-ui.css" rel="stylesheet" /> Screen shot :
5. Dot Luv
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/dot-luv/jquery-ui.css" rel="stylesheet" /> Screen shot :
6. Vader
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/vader/jquery-ui.css" rel="stylesheet" /> Screen shot :
7. Excite Bike
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/excite-bike/jquery-ui.css" rel="stylesheet" /> Screen shot :
8. Hot Sneaks
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/hot-sneaks/jquery-ui.css" rel="stylesheet" /> Screen shot :
9. Humanity
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/humanity/jquery-ui.css" rel="stylesheet" /> Screen shot :
10. Blitzer
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/blitzer/jquery-ui.css" rel="stylesheet" /> Screen shot :
11. South Street
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/south-street/jquery-ui.css" rel="stylesheet" /> Screen shot :
12. Cupertino
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css" rel="stylesheet" /> Screen shot :
13. Dark Hive
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/dark-hive/jquery-ui.css" rel="stylesheet" /> Screen shot :
14. EggPlant
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/eggplant/jquery-ui.css" rel="stylesheet" /> Screen shot :
15. Pepper Grinder
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/pepper-grinder/jquery-ui.css" rel="stylesheet" /> Screen shot :
16. Flick (or Flicker type)
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/flick/jquery-ui.css" rel="stylesheet" /> Screen shot :
17. Le Frog
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/le-frog/jquery-ui.css" rel="stylesheet" /> Screen shot :
18. Overcast
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/overcast/jquery-ui.css" rel="stylesheet" /> Screen shot :
19. Sunny
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/sunny/jquery-ui.css" rel="stylesheet" /> Screen shot :
20. Redmond
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" rel="stylesheet" /> Screen shot :
21. Start
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css" rel="stylesheet" /> Screen shot :
22. Smoothness
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" rel="stylesheet" /> Screen shot :
23. UI Darkness
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet" /> Screen shot :
24. UI Lightness
Kode : <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" /> Screen shot :

Demikianlah pelajaran untuk postingan kali ini teman. Dan itulah apa yang dimaksud dengan I S T I M E W A yang BeBeN bilang. Sangkin istimewanya capeknya juga benar-benar special...wkwkkwkwk. Good luck, happy blogging dan WassaLam.
Thanks a lot to : Divya for a great info and for theme by jQuery UI.