CARA MEMBUAT TAB MENU VIEW KEREN

tips-trik membuat tab menu view, menu view termasuk dalam golongan widget, didalam tab menu view terdapat kolom kolom yang nanti akan di isi sesuai url atau label anda terserah. fungsi tersendiri dari tab menu view adalah agar para visitor mengetahui apa saja yang ada di blog kita, fungsinya sama seperti popular post, artikel terkait dan lainya tetapi dalam bentuk berbeda.

1. Silahkan masing-masing login kehalaman blog
2. Jika semua sudah masuk ke akun blog masing-masing, sekarang Akses halaman Edit HTML Blogspot
3. Jika sudah masuk hlaman Edit HTML cari kode ]]></b:skin> ( Gunakan tombol CTRL + F dan F3 untuk mempermudah pencarian kode )
4. Jika kode sudah ditemukan Copy kode dibawah dan letakan diatas kode ]]></b:skin>

div.TabView div.Tabs { height: 24px; overflow: hidden; } div.TabView div.Tabs a { float: left; display: block; width: 90px; /* Lebar Menu Utama Atas */ text-align: center; height: 24px; /* Tinggi Menu Utama Atas */ padding-top: 3px; 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-color: #FF9900; /* Warna background Menu Utama Atas */ } div.TabView div.Pages { clear: both; border: 1px solid #6E6E6E; /* Warna border Kotak Utama */ overflow: hidden; background-color: #FF9900; /* 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; }

 5. Kode yang berwana Biru merupakan keterangan dari kode yang bisa kamu rubah untuk  penyesuaian dengan halaman blog kamu

6. Sekarang Klik Simpan template 
7 Klik Add a Gadget atau Tabah a Gadget 
8. Tunggu bebera saat akan muncul tampilan seperti dibawah, kemudian pilih Widget  HTML/JavaScript 
9. Copy Kode Berikut dan letakan kedalam kolom Widget HTML/JavaScript

<form action="tabview.html" method="get"> <div class="TabView" id="TabView"> <div class="Tabs" style="width: 350px;"> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a> </div> <div class="Pages" style="width: 350px; height: 250px;"> <div class="Page"> <div class="Pad"> Tab 1.1 <br /> Tab 1.2 <br /> Tab 1.3 <br /> </div> </div> <div class="Page"> <div class="Pad"> Tab 2.1 <br /> Tab 2.2 <br /> Tab 2.3 <br /> </div> </div> <div class="Page"> <div class="Pad"> Tab 3.1 <br /> Tab 3.2 <br /> Tab 3.3 <br /> </div> </div> </div> </div> </form> <script type="text/javascript"> tabview_initialize('TabView'); </script>

Keterangan :
1. Code yang berwarna biru diatas adalah lebar dan tinggi tabview yang bisa kamu sesuaikan.
2. Code yang berwarna Merah adalah text judul dari menu tabel (tab 1, tab 2, tab 3 ....)