◄ Min  Size Fonts: + | - | ± Color: Max ►

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.
  3. <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).
  4. Masuk ke halaman Layout ---> Page Elements ---> klik Add a Gadget ---> pilih yang HTML/JavaScript.
  5. 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
  2. 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 :
  3. Trontastic
  4. 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 :
  5. Black Tie
  6. 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 :
  7. Mint Choc
  8. 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 :
  9. Dot Luv
  10. 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 :
  11. Vader
  12. 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 :
  13. Excite Bike
  14. 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 :
  15. Hot Sneaks
  16. 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 :
  17. Humanity
  18. 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 :
  19. Blitzer
  20. 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 :
  21. South Street
  22. 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 :
  23. Cupertino
  24. 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 :
  25. Dark Hive
  26. 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 :
  27. EggPlant
  28. 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 :
  29. Pepper Grinder
  30. 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 :
  31. Flick (or Flicker type)
  32. 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 :
  33. Le Frog
  34. 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 :
  35. Overcast
  36. 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 :
  37. Sunny
  38. 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 :
  39. Redmond
  40. 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 :
  41. Start
  42. 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 :
  43. Smoothness
  44. 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 :
  45. UI Darkness
  46. 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 :
  47. UI Lightness
  48. 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.
Loading...
XCOLLAPSIBLE TAB VIEW
Make collapsible tab view using jQuery UI
Subscribe my posts Register For Free!

14 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE