Membuat Fitur Tab View

Tutorial kali ini adalah tentang membuat fitur blog yang bernama tab view. Menu Tab View adalah Menu yang berbentuk tabel dengan pengelompokan halaman sesuai dengan kategori tabel menu diatasnya. Jika anda tertarik untuk membuat fitur tab view, silahkan ikuti langka-langkah dibawah ini:

Tahap Pertama:
1. Anda login ke account blogger anda
2. Lalu pada halaman dashboard, klik link tata letak/ layout
3. Klik edit html (jangan lupa, terlebih dulu di backup template anda)
4. Copy paste kode dibawah ini:

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/> dan letakkan diatas kode: </head>

5. Cari kode: ]]></b:skin>
6. Copy paste kode dibawah ini diatas kode tersebut

/*-- (Menu/Tab) --*/
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 110px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 8px;
vertical-align: middle;
/*border: 1px solid #000; Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background:url("http://2.bp.blogspot.com/_h2Z5-se9eC4/SRuZP3WdOhI/AAAAAAAAAt0/1-l1yQFfou4/s1600/bgtab.png") /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #C0C0C0; /* Warna border Kotak Utama */
overflow: hidden;
background:url("http://4.bp.blogspot.com/_h2Z5-se9eC4/SRuZmOUy6jI/AAAAAAAAAt8/kv8TTjeRI5o/s1600/bacground-menu-tab.gif")no-repeat; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

7. Klik save/ simpan template

Tahap Kedua:
1. Klik Elemen Halaman / Page Elements
2. Klik Tambah Gadget / Add New Gadget
3. Pilihlah Menu Html/Java Script
4. Copy Paste Kode di bawah ini, pada halaman table Html/Java Script

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 393px; height: 30px" class="Tabs">
<a>Blogroll</a>
<a>Fitur</a>
<a>Hacking</a>
</div>
<div style="width: 335px; height: 200px;" class="Pages">

<div class="Page">
<div class="Pad">
1. <a href="http://aneka-aksesoris.blogspot.com/">Aksesoris Blogspot</a> <br/>
2. <a href="http://AlamatBlog.com/">NamaMenu</a> <br/>
3. <a href="http://AlamatBlog.com/">NamaMenu</a> <br/>
</div>
</div>

<div class="Page">
<div class="Pad">
1. <a href="http://kursus-otodidak.blogspot.com/2009/03/membuat-dan-menampilkan-font-style.html">Membuat Font Style Setting</a> <br/>
2. <a href="http://AlamatBlog.com/">NamaMenu</a> <br/>
3. <a href="http://AlamatBlog.com/">NamaMenu</a> <br/>
</div>
</div>

<div class="Page">
<div class="Pad">
1. <a href="http://kursus-otodidak.blogspot.com/2009/03/mencegah-pengkopian-konten_15.html">Mencegah Pengkopian Konten</a> <br/>
2. <a href="http://kursus-otodidak.blogspot.com/2009/03/membuat-dan-menampilkan-font-style.html">Membuat Font Style Setting</a> <br/>
3. <a href="http://AlamatBlog.com/">NamaMenu</a> <br/>
</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script>

5. Klik Simpan / Save.
6. Selesai dan silahkan edit sesuai kebutuhan

Info:
1. Warna kuning dan merah sesuaikan dengan ukuran sidebar di template anda
2. Warna hijau bisa tinggal anda tambah jumlahnya dengan copy paste
3. Huruf tebal (Blod) adalah petunjuk bagian-bagian yang mau anda edit