Cara Membuat Tab View

Apakah sobat sekalian ingin membuat tab view?? Sobat sekalian belum tau cara membuatnya?? Tepat sekali bagi sobat sekalian yang belum tau Cara Membuat Tab View membuka blog saya, karena kali ini saya akan membahasnya, yuk langsung ja :

1.  Login ke blogger
   
   
2. Klik Tata Letak
   
   
3. Klik Edit HTML
   
   
4. Kemudian cari kode ini ]]></b:skin>
   
   
5. Kemudian masukkan kode di bawah 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 #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;
   }
   

6. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode-kode warna silahkan lihat DISINI
   
   
7. Cari kode <./head> , dan pasang kode di bawah ini sebelum </head>
   
   
   
   
   

   <script src="http://h1.ripway.com/khantry/javascript/tabview.js" type="text/javascript"></script>
   

8. Klik Simpan Template
   
   
9. Masuk ke Elemen Halaman
   
   
10. Klik Tambah Gadget
    
    
11. Klik HTML/Javascript, dan masukkan kode berikut kedalamnya.
    
    
    
    

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

12. Perhatian :
    -  Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
    -  Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
    -  Kode yang berwarna merah adalah isi dari tabview tersebut. Sobat bisa mengisinya dengan link, gambar, banner, script dll.
    
    
13. Selamat mencoba yaahhh.....