Membuat Tab View atau Tab Switch

Untuk 1 Tab

<style type="text/css">
body {color: #554444; font-size: 13px; font-family: serif; margin: 10px; background: #F9F5EA;}
.TabView .Tabs { overflow: hidden; }
.Tabs a { float: left; text-align: center; padding: 5px 8px; text-decoration: none; }
.Tabs a:hover, .Tabs a.Active { background: yellow; text-decoration: none; font-weight: bold; }
.Pages { overflow: hidden; height: 75px; width: 395px; }
.Page { background: yellow; padding: 5px 10px; }
/* overflow: hidden berfungsi untuk tampil ok pd opera mini*/
</style>
<script src="http://moalmules.googlecode.com/files/tabview.js" type="text/javascript"></script>
<!-- TabView1 -->
<br />
<div class="TabView" id="TabView1">
<div class="Tabs">
<a href="http://www.blogger.com/blogger.g?blogID=7075780585341431389">planetcaang</a>
<a href="http://www.blogger.com/blogger.g?blogID=7075780585341431389">bumicaang</a>
<a href="http://www.blogger.com/blogger.g?blogID=7075780585341431389">electro-study</a>
<a href="http://www.blogger.com/blogger.g?blogID=7075780585341431389">elektronika</a>
</div>
<div class="Pages">
<div class="Page">
TEST 1</div>
<div class="Page">
TEST 2</div>
<div class="Page">
TEST 3</div>
<div class="Page">
TEST 4</div>
</div>
</div>
<script type="text/javascript">tabview_initialize('TabView1');</script>

Untuk 3 Tab

<style type="text/css">
body {color: #554444; font-size: 13px; font-family: serif; margin: 10px; background: #F9F5EA;}
.TabView .Tabs { overflow: hidden; }
.Tabs a { float: left; text-align: center; padding: 5px 8px; text-decoration: none; }
.Tabs a:hover, .Tabs a.Active { background: yellow; text-decoration: none; font-weight: bold; }
.Pages { overflow: hidden; height: 75px; width: 395px; }
.Page { background: yellow; padding: 5px 10px; }
/* overflow: hidden berfungsi untuk tampil ok pd opera mini*/
</style>
<script src="http://moalmules.googlecode.com/files/tabview.js" type="text/javascript"></script>
<!-- TabView1 -->
<div id="TabView1" class="TabView">
<div class="Tabs" >
<a>planetcaang</a>
<a>bumicaang</a>
<a>electro-study</a>
<a>elektronika</a>
</div>
<div class="Pages">
<div class="Page">TEST 1</div>
<div class="Page">TEST 2</div>
<div class="Page">TEST 3</div>
<div class="Page">TEST 4</div>
</div>
</div>
<script type="text/javascript">tabview_initialize('TabView1');</script>
<!-- TabView2 -->
<div id="TabView2" class="TabView">
<div class="Tabs" >
<a>planetcaang</a>
<a>bumicaang</a>
<a>electro-study</a>
<a>elektronika</a>
</div>
<div class="Pages">
<div class="Page">TEST 5</div>
<div class="Page">TEST 6</div>
<div class="Page">TEST 7</div>
<div class="Page">TEST 8</div>
</div>
</div>
<script type="text/javascript">tabview_initialize('TabView2');</script>
<!-- TabView3 -->
<div id="TabView3" class="TabView">
<div class="Tabs" >
<a>planetcaang</a>
<a>bumicaang</a>
<a>electro-study</a>
<a>elektronika</a>
</div>
<div class="Pages">
<div class="Page">TEST 9</div>
<div class="Page">TEST 10</div>
<div class="Page">TEST 11</div>
<div class="Page">TEST 12</div>
</div>
</div>
<script type="text/javascript">tabview_initialize('TabView3');</script>

Keterangan:

1. Copy paste kode HTML di atas di HTML/JavaScript 
2. Kode tersebut akan menghasilkan tiga buah tab view atau tab switch
3. Style CSS bisa kawan ubah sesuai dengan keinginan, misalnya color: #554444; menjadi color: red; ukuran font-size: 13px; menjadi font-size: 15px; atau ingin mengubah lebar tab view width: 395px; menjadi 250px;
4. Ganti judul tab view planetcaang, bumicaang, electro-study, dan elektronika dengan judul yang kawan inginkan
5. Ganti isi tab view (gadget) mulai dari TEST 1 s/d TEST 12, dengan gadget blog kawan
6. Demonya bisa kawan lihat di Tes Tab View Lebih dari Satu

Hasil

planetcaang bumicaang electro-study elektronika

TEST 1

TEST 2

TEST 3

TEST 4

xxxxxx