Cara Membuat Menu Tab View

Kamu mungkin ingin meletakkan Menu Tab View seperti yang ada di sebelah kanan blog saya kan,..??
Ok,..di sini saya kongsikan bagaimana cara membuat Menu Tab View.
Tab View tersebut seperti gambar di bawah:

Untuk membuat Tab View tersebut kita kena guna script. Ikuti langkah mudah di bawah.

1. Login ke blogger dan terus pilih menu "Layout-Edit HTML"
2. Kemudian cari kode ini ]]></b:skin> dengan mengguna fungsi Crtl+F
3. Kemudian masukkan kode di bawah sebelum kode ]]></b:skin> atau dalam tag CSS.
4. 
   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. Perhatikan teks-teks yang berwarna merah, ityu adalah keterangan tentang bagaimana nak mengatur Tab View. Ada ukuran warna dll. Untuk mendapatkan kode2 warna, sila klik DI SINI.
6. Langkah seterusnya, pasang kode berikut ini sebelum kode </head>
7. <script src='http://kendhin.googlepages.com/tabview.js' type='text/javascript'/>
8. Kemudian 'Save'.

Langkah seterusnya....

1. Pergi ke menu "Page Element"
2. Terus pilih "Add a Gadget" --> "HTML/Javascript" di tempat yang akan kamu letakkan Menu Tab View ini.
3. Kemudian copy and paste kode di bawah ke dalam gadget tersebut:
4. 
   <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>
5. Keterangan:

• Angka-angka atau teks yang berwarna biru (350px) adalah ukuran ting dan lebar tab view.
• Kode yang berwarna Hijau adalah teks yang di Menu Utama ( Menu Atas)
• Kode yang berwarna merah adalah isi dari tab view tersebut. (Boleh diisi dengan link, gambar, banner, script dll).
• Untuk menambah jumlah menu, maka perhatikan teks yang berkedip-kedip. Tambahkan menu di bawahnya sahaja.

Sumber: Trik Tips Blogging