Cara Membuat Tab Menu Sidebar

langsung aja ea gan..
caranya begini....

1. Login ke Blogger, klik Rancangan/Design , klik Edit HTML, Download Template Lengkap dan kasih tanda centang pada kotak bertuliskan Expand Template Widget.

2. Gunakan tombol Find (Ctrl + F) untuk mencari kode , kemudian letakkan kode javascript di bawah ini sebelum atau di atas kode :

3. kode:

4. Setelah itu letakkan kode di bawah ini sebelum atau di atas kode ]]>:

5. kode: div.TabView div.Tabs
   {
   height: 30px;
   overflow: hidden;
   }
   div.TabView div.Tabs a
   {
   float: left;
   display: block;
   width: 98px; /*Lebar Menu Utama Atas*/
   text-align: center;
   height: 30px; /* Tinggi Menu Utama Atas */
   padding-top: 3px;
   vertical-align: middle;
   border: 1px solid #BDBDBD; /* Warna border Menu Atas */
   border-bottom-width: 0;
   text-decoration: none;
   font-family: "Verdana", Serif; /* Font Menu Utama Atas */
   font-weight: bold;
   color: #000; /* Warna Font Menu Utama Atas */
   -moz-border-radius-topleft:10px;
   -moz-border-radius-topright:10px;
   }
   div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
   {
   background-color: #E6E6E6; /* Warna background Menu Utama Atas */
   }
   div.TabView div.Pages
   {
   clear: both;
   border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
   overflow: hidden;
   background-color: #E6E6E6; /* Warna background Kotak Utama */
   }
   div.TabView div.Pages div.Page
   {
   height: 100%;
   padding: 0px;
   overflow: hidden;
   }
   div.TabView div.Pages div.Page div.Pad
   {
   padding: 3px 5px;
   }

6. Kemudian Simpan Template.

7. Langkah selanjutnya, klik Rancangan/Design, Add Gadget/Tambah Gadget, yang HTML/Javascript
   

8. Berilah judul pada kolom HTML/Javascript dan masukan kode di bawah ini ke dalam content HTML/Javascript:

9. kode:
   
   

   
   

   
   

   300px;">
   Tab 1
   Tab 2
   Tab 3
   

   
   

   300px;">
   

   
   

   
   Tab 1.1
   
   Tab 1.2
   
   Tab 1.3
   
   

   
   

   
   

   
   

   
   Tab 2.1
   
   Tab 2.2
   
   Tab 2.3
   
   

   
   

   
   

   
   

   
   Tab 3.1
   
   Tab 3.2
   
   Tab 3.3
   
   

   
   

   
   

   
   

   
   

   
   
   
   

10. Kemudian Simpan.

lihat hasilnya...

• Kode yang berwarna biru silahkan anda isi dengan judul menu;

• Dan yang berwarna hijau, adalah isi dari menu. Anda bisa menambahkan link, gambar, banner, dll. selamat mencoba....

BACA JUGA BRO: