Membuat Widget Tab View

Ini sama halnya cara membuat menu tab view tapi mungkin Anda tidak tahu, itu bagi para pemula termasuk saya :) . Gambar disamping adalah contoh dari menu tab view sama halnya dengan daftar isi bentuknya tapi ini disertai dengan atau terbagi menjadi tiga kolom supaya memudahkan Anda untuk menaruh setiap judul posting yang baru Anda posting. Selain untuk daftar isi, ini juga bisa digunakan untuk menaruh link banner teman2 blogger Anda, data statistik dari traffic Anda jika Anda membuat histats, visitor, pagerank dll. Membuat tab viem menu ini juga bisa meminimalisasi blog Anda biar tidak terlalu berantakan dimana fitur blog Anda yang sebagian besar menggunakan HTML atau Javascript. Kalau begitu mari kita coba buat dengan tips membuat view tab menu berikut ini:

1. Login ke blogger, Dasbor pergi ke>> Rancangan>>Edit HMTL.

2. Centang Expand Template Widget.

3. Anda perlu untuk membackup template asli anda terlebih dahulu dengan Download Template     Lengkap dan memilih simpan/save dan menyimpannya pada hard disk. Cadangan ini akan bermanfaat jika ada yang tidak beres dengan langkah2 yang anda kerjakan.

4. Cari kode ]]></b:skin>
Kalau sulit bisa dengan cara cepat saat pencarian yaitu dengan tekan CTRL F/F3.

5. Letakkan kode dibawah ini diatas kode tersebut.

/* Menu Tab View

----------------------------------------------- */
div.TabView div.Tabs {widht:100%;
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 89px; /* ukuran lebar menu */
text-align: center; /* rata tengah */
height: 30px; /* ukuran tinggi menu */
padding-top: 10px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #ccc; /* warna border menu */
border-bottom-width: 0;
margin:0px;
padding: 5px 0;
font-family:verdana,Helvetica,sans-serif; /* font */
font-size:12px; /* ukuran font */
font-weight:bold; /* besar hurup menu */
background-color: #D8D8D8; /* warna latar menu */
color: #424242; /* warna huruf menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
div.TabView div.Tabs a.Active {
background-color: gray; /* warna background menu aktif */
color: #000000;
}
div.TabView div.Tabs a:hover {
background-color: #D8D8D8; /* warna background menu hover */
color: #424242;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:#D8D8D8; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 7px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 5px 0px;
font-size: 12px; /* besar hurup kotak utama */
}

/* tabview css end */

Jangan lupa edit yang ditunjukkan kode yang berwarna merah sepaya sesuai dengan blog Anda Ok.

6. Kemudian Anda cari kode </head> dan letak kode dibawah ini diatas kode tersebut.

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js' type='text/javascript'/>

7. Jangan lupa Simpan Template.

8. Kemudian Anda masuk ke menu Rancangan.

9. Klik Elemen Laman.

10. Klik Tambah Gedget.

11. Pilih HTML/JavaScript dan masukkan kode dibawah ini ke dalam content HTML tersebut.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 273px;">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
</div>
<div class="Pages" style="width: 271px; height: 275px;">

<div class="Page">
<div class="Pad">
<li><a href="Link artikel 1 dalam judul 1">Sub menu 1 judul 1</a></li>
<li><a href="Link artikel 2 dalam judul 1">Sub menu 2 judul 2</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href='Link artikel 1 dalam judul 2'>Sub menu 1 judul 2</a></li>
<li><a href='Link artikel 2 dalam judul 2'>Sub menu 2 judul 2</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="Link artikel 1 dalam judul 3">Sub menu 1 judul 3</a></li>
<li><a href="Link artikel 2 dalam judul 3">Sub menu 2 judul 3</a></li>
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initializeundefined'TabView');
</script><noscript><a href="http://www.centro.web.id" title="Centro Indonesia"><strong>software, tips blog, ebook, bisnis online
</strong></a></noscript>

Anda bisa ganti :

warna merah dengan link Anda.
warna ungu dengan judul sub menu.

warna biru dengan judul tab view.

12. Lalu Save dan selesai semoga berhasil.