Tutorial Bagaimana Cara Membuat Menu TabView

Kali ini saya mencoba menjelaskan akan pertanyaan-pertanyaan yang muncul dari rekan saya yang menanyakan tentang bagaimana cara membuat TabView.

Apa itu TabView?
Seperti apa bentuknya?
Bagaimana cara membuatnya?

Tab View sangat berguna untuk blog karena dapat menghemat ruang pada blog dan bisa menampung begitu banyak link serta konten blog di dalamnya.
Contoh bentuk bisa diliat seperti berikut ini:



Kemudian, bagaimana cara membuatnya?
Ikuti langkah-langkah berikut ini:

1. Login ke akun blog
2. Pilih menu Layout » masuk ke Edit HTML
3. Cari kode ini ]]></b:skin>
4. Copy lalu paste kode berikut ini sebelum 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 #000000; /* Warna border Menu Atas */
   border-bottom-width: 0;
   text-decoration: none;
   font-family: "Arial", Times New Roman, Serif; /* Font Menu Utama Atas */
   font-weight: 900;
   color: #000080; /* Warna Font Menu Utama Atas */
   }
   
   div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
   {
   background-color: #BDBDBD; /* Warna background Menu Utama Atas */
   }
   
   div.TabView div.Pages
   {
   clear: both;
   background-color: #FFFFFF; /* Warna background Kotak Utama */
   border: 1px solid #000000; /* Warna border Kotak Utama */
   overflow: hidden;
   }
   
   div.TabView div.Pages div.Page
   {
   height: 100%;
   padding: 0px;
   overflow: hidden;
   }
   
   div.TabView div.Pages div.Page div.Pad
   {
   padding: 3px 5px;
   }

   Teks yang berwarna merah adalah keterangan untuk mengatur tab view. Seperti ukuran tebal border, tinggi dan lebar tab view serta warna background.
5. Kemudian pasang script berikut sebelum kode </head>

   <script src='http://ganesha-system.com/tabview.js' type='text/javascript'/>

6. Kemudian klik Save Template
7. Lalu masuk ke menu Page Elements
8. Pilih Add a Gadget » Pilih menu HTML/Javascript, Copy lalu paste kode berikut di dalamnya.

   <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>

9. Lalu klik Save dan tempatkan widget tabview agar sesuai dengan template anda.
10. Berhasil

Sebagai catatan:

• Angka yang berwarna merah adalah ukuran lebar dan tinggi widget tab view.
• Kode yang berwarna hijau adalah teks pada menu utama di bagian atas.
• Kode yang berwarna biru adalah teks yang berada di halaman tab view yang bisa Anda isi dengan link apa saja, gambar, banner dan script lainnya.
• Untuk menambahkan jumlah menu maka perhatikanlah text yang berkedip-kedip. Tambahkan menu berikutnya di bawahnya.

Contoh pengaturan teks :

• Teks "Tab 1" dapat diganti dengan teks lain seperti "FAMILY", "MALE" “FEMALE” atau teks lainnya.
• Sedangkan pada bagian isi menu di bawahnya yang berwarna biru Tab 1.1 bisa diganti dengan link posting blog seperti ini :
  <ul>
  <li><a href="http://ganesha-system.com/?id=admin">Bisnis Pulsa</a>
  </li>

Mudah-mudahan tutorial membuat TabView ini dapat bermanfaat.

Bagaimana menurut Anda?
Beritahu bila mengalami kesulitan dalam memahami tutorial ini.

Posted in: All