Rosydi-blog: Cara Membuat Tab Menu Sidebar

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

Login ke Blogger, klik Rancangan/Design , klik Edit HTML, Download Template Lengkap dan kasih tanda centang pada kotak bertuliskan Expand Template Widget.
Gunakan tombol Find (Ctrl + F) untuk mencari kode , kemudian letakkan kode javascript di bawah ini sebelum atau di atas kode :
kode:
Setelah itu letakkan kode di bawah ini sebelum atau di atas kode ]]>:
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;
}
Kemudian Simpan Template.
Langkah selanjutnya, klik Rancangan/Design, Add Gadget/Tambah Gadget, yang HTML/Javascript
Berilah judul pada kolom HTML/Javascript dan masukan kode di bawah ini ke dalam content HTML/Javascript:
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
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....