Cara membuat Menu Tab View di SideBar

Tutorial kali ini, saya mau share buat anda yang ingin memasang Menu Tab View di SideBar blog anda. Membuat menu dengan tab view memang kode HTMLnya agak sedikit panjang, tapi gapaplah yah.

Baiklah untuk hasil visualnya kira-kira seperti ini :

Jika anda tertarik memasangnya diblog anda, mari silakan ikuti langkah-langkahnya sbb:

1. Login ke Blogger =>klik Rancangan/Design =>klik Edit HTML, Download Template Lengkap untuk back up bila terjadi kesalahan dan kasih tanda centang pada kotak bertuliskan Expand Template Widget
2. Gunakan tombol Find (Ctrl + F)untuk mencari kode</head>,kemudian letakkan kode javascript di bawah ini sebelum atau di atas kode</head>: 
<script src='http://heberscript.googlecode.com/files/tabview.js type="text/javascript"/>
3. Kemudian letakkan kode berikut diatas kode ]]></b:skin>

/* 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: 110px; /* ukuran lebar menu */ 
text-align: center; 
height: 30px; /* ukuran tinggi menu */ 
padding-top: 7px; 
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:Arial,Helvetica,sans-serif; 
font-size:12px; 
font-weight:bold;; /* besar hurup menu */ 
background-color: #4c4c4c; /* warna latar menu */ 
color: #FFFFFF; /* warna hurup 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: #FFFFFF; /* warna background menu aktif */ 
color: #000000; 
} 
div.TabView div.Tabs a:hover { 
background-color: #999999; /* warna background menu hover */ 
color: #FFFFCC; 
font-weight: bold; 
} 
/* Kotak Utama */ 
div.TabView div.Pages { 
clear: both; 
border: 1px solid #CCC; /* warna border kotak utama */ 
overflow: hidden; 
background:#FFFFFF; /* 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 */ 
}

Jangan lupa simpan template. kemudian klik pada elemen halaman=> tambah gadget=> HTML/JavaSript=> copy dan paste code berikut dalam content:

<form action="tabview.html" method="get"> 
<div id="TabView" class="TabView"> 
<div style="width: 100%;" class="Tabs">  
Disini letakkan kode untuk menu tab 1  
</div> 
<div style="width: 99%; height: 200px;" class="Pages"> 
<!--Awal Menu 1--> 
<div class="Page"><div class="Pad"> 
Disini letakkan kode untuk menu tab 2 </div></div> 
<!--Akhir Menu 1--> 
<!--Awal Menu 2--> 
<div class="Page"><div class="Pad"> 
Disini letakkan kode untuk menu tab 3 </div></div> 
<!--Akhir Menu 2--> 
<!--Awal Menu 3--> 
<div class="Page"><div class="Pad"> 
Disini letakkan kode untuk menu tab 4 </div></div> 
<!--Akhir Menu 3--> 
</div></div></form> 
<script type="text/javascript">tabview_initialize('TabView');</script> 
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://tutorialines.blogspot.com/2011/05/cara-membuat-menu-tab-view-di-sidebar.html" target="_blank" title="Tabview Widget">Widget by Tutorial Blog</a></div>

Klik tombol Save Template

Keterangan
Silakan anda ganti dan edit kode diatas, judul tab dan untuk warna bisa lihat kodenya disinikemudian save lagi. Lihat blog untuk melihat hasilnya!

Semoga bermanfaat.

HAPPY BLOGGING