Selasa, 15 Desember 2009

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).
  3. Masuk ke halaman Layout ---> Page Elements ---> klik Add a Gadget ---> pilih yang HTML/JavaScript.
    4. 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 :
  2. Trontastic
    3. 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
    4. 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
    5. 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
    6. 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
    7. 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
    8. 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
    9. 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
    10. 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
    11. 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
    12. 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
    13. 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
    14. 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
    15. 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
    16. 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)
    17. 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
    18. 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
    19. 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
    20. 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
    21. 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
    22. 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
    23. 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
    24. 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
    25. 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.
Diposting oleh di
Label: , ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)