Membuat Tampilan TabView Dengan Simpel dan Menawan

CONTOH DEMO TAB VIEW...

Bagaimana cara Install Widget ini di Blogger?

Tahap Perama
A. Masukkan Script Code
B. Masukkan Kode CSS Tema Yang Sesuai Pilihan
C. Tambahkan Kode HTML

Adding Script Code

1. Masuk ke Blogger Dashboard > Design > Edit HTML / Dasbor > Rancangan > Edit HTML
2. Cari kode </head> dan Letakkan Kode Berikut Sebelum </head>.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</script>
<script>
    $(document).ready(function() {
        $("#tabs").tabs();
    });
</script>

Tahap Kedua : Menambahkan Kode Css Tema Yang Dipilih

Pilih Salah Satu Tema Berikut sesuai Selera dan Letakkan Kode Tema (link css) Sebelum </head>

	Name:Base <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" />
	Name:Black Tie <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/black-tie/jquery-ui.css" type="text/css" />
	Name:Blitzer <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/blitzer/jquery-ui.css" type="text/css" />
	Name:Cupertino <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/cupertino/jquery-ui.css" type="text/css" />
	Name:Dark Hive <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/dark-hive/jquery-ui.css" type="text/css" />
	Name:Dot Luv <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/dot-luv/jquery-ui.css" type="text/css" />
	Name:Eggplant <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/eggplant/jquery-ui.css" type="text/css" />
	Name:Excite Bike <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/excite-bike/jquery-ui.css" type="text/css" />
	Name:Flick <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/flick/jquery-ui.css" type="text/css" />
	Name:Hot Sneaks <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/hot-sneaks/jquery-ui.css" type="text/css" />
	Name:Humanity <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/humanity/jquery-ui.css" type="text/css" />
	Name:Le Frog <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/le-frog/jquery-ui.css" type="text/css" />
	Name:Mint Chocolate <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/mint-choc/jquery-ui.css" type="text/css" />
	Name:Overcast <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/overcast/jquery-ui.css" type="text/css" />
	Name:Peper Grinder <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/pepper-grinder/jquery-ui.css" type="text/css" />
	Name:Redmond <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/redmond/jquery-ui.css" type="text/css" />
	Name:Smoothness <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/smoothness/jquery-ui.css" type="text/css" />
	Name:South Street <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/south-street/jquery-ui.css" type="text/css" />
	Name:Start <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/start/jquery-ui.css" type="text/css" />
	Name:Sunny <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/sunny/jquery-ui.css" type="text/css" />
	Name:Swanky Purse <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/swanky-purse/jquery-ui.css" type="text/css" />
	Name:Trontastic <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/trontastic/jquery-ui.css" type="text/css" />
	Name:UI Darkness <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-darkness/jquery-ui.css" type="text/css" />
	Name:UI Lightness <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css" type="text/css" />
	Name:Vader <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css" type="text/css" />

MENAMBAHKAN KODE HTML PADA WIDGET

Isi Pada Kotak Form Berikut:
Tab 1 diisi dengan Kategori I  , dan pada Kotak sub diisi dengan Script Sub kategori, Contoh: Tab1= ktegori TELEVISI dan SUB : < a href="#">Servis Televisi<a> kemudian pada Tab 2 diisi dengan kategori II, lakukan hal yang sama seperti pada poin kategori I.
jika dijabarkan menjadi seperti ini:

<div id="TELEVISI ">
<ul><li><span class="item-title"><a target="_self"
href="url">Servis Televisi</a></span></li><li><span class="item-title"><a target="_self" href="http://protonicatv.blogspot.com/">Daftar Merk Televisi Faforit</a></span></li><li><span class="item-title"><a target="_self" href="http://protonicatv.blogspot.com/">Menambahkan  Flying Twitter Blogger /Blogspot</a></span></li><li><span class="item-title"><a target="_self" href="http://protonicatv.blogspot.com/">Merakit Televisi</a></span></li><li><span class="item-title"><a target="_self" href="http://protonicatv.blogspot.com/">Alamat Protonica</a></span></li></ul>
    </div>
Perhatikan letak kode ul/li tersebut

Klik Generate dan Add to BLOGGER....(Default untuk Reset ,...)
pilih Blog Yang ingin ditambahkan Widget ini, susun tata letak yang memiliki ruang Width Minimum 600px, klik saved dan lihat Blog

Untuk menampilkan aplikasi ini, Kopy Code Berikut:

<iframe frameborder="0" height="875px" scrolling="no" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_jqueryui-Tabbed-navigationwidget-for-blogger-by-way2blogging.org.html" style="outline-color: initial; outline-style: none; outline-width: medium;" width="600px"></iframe>

SUMBER:by-way2blogging.org