Memasang Tab View atau Tab Switch Lebih dari Satu
Memasang tab view atau tab switch lebih dari satu. Dengan sedikit modifikasi kode tab view pada artikel sebelumnya, kita bisa membuat tab view tersebut menjadi beberapa buah.
Lihat kode HTML berikut ini
Keterangan:
Lihat kode HTML berikut ini
<style type="text/css">
body {color: #444444; 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="https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/moalmules/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:
- Copy paste kode HTML di atas dalam gadget HTML/JavaScript blog
- Kode tersebut akan menghasilkan tiga buah tab view atau tab switch
- Style CSS bisa kawan ubah sesuai dengan keinginan, misalnya color: #444444; menjadi color: red; ukuran font-size: 13px; menjadi font-size: 15px; atau ingin mengubah lebar tab view width: 395px; menjadi 250px;
- Ganti judul tab view planetcaang, bumicaang, electro-study, dan elektronika dengan judul yang kawan inginkan
- Ganti isi tab view (gadget) mulai dari TEST 1 s/d TEST 12, dengan gadget blog kawan
- Semoga berhasil
Dalam dunia blogging kita mengenal bahasa html, javascript, dan css. Ketiga bahasa pemograman tersebut sangat umum digunakan, misalnya untuk sekedar 
World Wide Web Consortium (W3C) merupakan situs layanan validasi markup yang memungkinkan pengguna internet dalam hal ini 
Jangan terkejut bila menemukan sebanyak itu, soalnya saya juga mengalami sampai 162 Errors, 134 warning(s).
Hosting gambar animasi, JavaScript, CSS melalui Google Code. Sebelumnya saya telah menulis cara 
)
Membahas CSS tidak ubahnya seperti belajar memodifikasi blog. Dengan bahasa HTML-nya, CSS bisa membuat blog tampil beda, sesuai yang kita inginkan. Sangat menarik membahasnya, apalagi bagi saya yang suka ngutak-atik blog dan sedikit banyak menulis tentang tutorial blog.
Sampai posting ini diterbitkan, saya telah membahas atribut atau property CSS sebanyak tiga belas buah. Untuk mereviewnya kawan bisa lihat 
Melanjutkan materi pembahasan CSS, kali ini bagian ke-4 tentang Float, Height, dan Overflow. Sebelumnya saya berharap kawan memahami sepuluh buah atribut CSS yang telah dijelaskan pada 
Bila pada postingan sebelumnya (baca di 
