Cara Membuat Menu Tabview Versi 1

Apa sih yang dinamakan tabview itu? Dan kenapa Tabview itu sering dipergunakan? Jawabannya sangat mudah, menu tabview sudah kita ketahui fungsinya yaitu untuk memperpraktis halaman yang akan kita gunakan untuk menampilkan link-link yang saling bertautan. Walau sudah ada metode untuk memperpraktis halaman yaitu dengan teknik scroll, tabview dinilai lebih praktis. Tapi dalam suatu blog, hanya boleh ada 1 menu tabview, jika ada yang lain, menu-menu yang ada menu tabview akan tidak berfungsi. Nah, untuk mempersingkat saja, bagaimana sih cara membuatnya? Trik ini sebenernya trik versi Bang Kendhin, tapi karena ada temend q yang pengen buat dan daripada susah-susah q jelasin, ya udah, makanya q posting aja nih trik. Dan menu tabview itu sendiri gambarnya begini…











Udah tau khand? Kalo pingin tau gini nih cara buatnya :

1. Login pada Blogger


2. Pilih Tata Letak/Layout


3. Kemudian Edit HTML


4. Klik Expand Widget Template: langkah terbaik adalah juga men-download template dengan cara klik Download Template Lengkap sebelum melakukan edit agar bisa kembali ke pengaturan awal jika terjadi kesalahan.


5. Copy Paste Kode berikut di atas 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.


7. Langkah berikutnya yaitu menyisipkan kode berikut sebelum kode </head>
   

   <script src="http://superinhost.com/trikblog/tabview.js" type="text/javascript"/>
   



8. Kemudian Simpan Template


9. Lalu pergi ke Page Elements


10. Trus PIlih Add a Gadget --> HTML/Javascript di tempat yg akan km letakkan Manu Tab View ini.


11. Kemudian Copy paste kode di bawah ini yang nantinya akan menjadi Tabview kamu :
    

    <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 :
- 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 tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menambahkan jumlah menu maka perhatikanlah text yang berkedip-kedip. Tambahkan menu tersebut dibawahnya.

Mengerti khand sekarang? Semoga postingan ini bermanfaat bagi kalian. :D

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di die-silver.blogspot.com

Gunakan Tombol berikut untuk menyimpan halaman :
Cara Membuat Menu Tabview Versi 1
menjadi format PDF dan lebih maksimal jika terdapat kesalahan koneksi atau yang lainnya.

..::Artikel Menarik Lainnya::..

Trik Blog

• Masalah Pada Kotak Komentar
• Memberi Penomoran Pada Daftar yang Ditulis
• Editor Baru untuk Posting di Blogspot
• Mengganti Tulisan Read More dengan Gambar
• Cara Mengembalikan Blog yang Terhapus
• Cara Setting Domain Berbayar di Blogspot Tanpa Hosting
• Cara Membuat Status YM Sendiri
• Cara Membuat Read More Menggunakan Span-id
• Cara Memasang Emoticon di Atas Kotak Komentar
• Hosting Gratis 000webhost.com Mengalami Problem
• Cara Membuat Spoiler di Blog
• Cara Memasang Gadget Online Visitor
• Cara Berkomentar yang Baik dan Benar
• Membuat Menu Dropdown Dan Variasinya
• Pasang Alert di Blog Sebagai Pesan Penutup
• Cara Memodifikasi Tulisan PAda Blog
• Cara Membuat Daftar Isi Pada Blog
• Cara Membuat Tabel Pada Blog
• Mempercantik Tampilan Judul Posting pada Label
• Membuat Huruf Posting Bergaya Koran
• Cara Pasang Statistik dan Tracker
• Cara Menampilkan Recent Comments
• Cara menghilangkan Tang dan Obeng
• Memodifikasi Tampilan Artikel Berlangganan Feedburner
• Memasang Widget Artikel Terkait/Related Post pada Blog

Blog

• Berhenti Berharap pada Die-Silver
• Masalah Pada Kotak Komentar
• Design Elements of a Blog
• Optimasi Blog dan Link Teman-Teman
• Editor Baru untuk Posting di Blogspot
• Cara Setting Domain Berbayar di Blogspot Tanpa Hosting
• Hosting Gratis 000webhost.com Mengalami Problem
• Cara Membuat Spoiler di Blog
• Cara Memasang Gadget Online Visitor
• Cara Berkomentar yang Baik dan Benar
• Membuat Menu Dropdown Dan Variasinya
• Cara Blogwalking yang Benar Ala Die-Silver
• Cara Menampilkan Adsense di Blog Berbahasa Indonesia
• Memasang Widget Top Komentator
• Membuat Link Berkelip/Pelangi
• Dasar-dasar Pembuatan Link
• Cara Buat Kotak Link Exchange
• Membuat Kotak Komentar di Bawah Postingan
• Cara Membuat Kotak Blogroll
• Membuat Judul Blog Berjalan
• Daftar Blog DoFollow
• Google Update Pagerank
• Cara Menghilangkan Menu Navigation Bar
• Membuat Widget Chat Box untuk Pemula
• Cara Menampilkan Recent Post (Postingan Terbaru)