Cara membuat menu tabview

Cara membuat menu tabview

Duh ribet mau nambah widget lagi tapi udah penuh, jadi tidak enak dilihat. Nah, Agar kita bisa menghemat tempat widget pada blog, kita bisa menambahkan menu tabview ini. Kadang kita ingin menambahkan banyak widget sedangkan blog kita sudah penuh dengan berbagai macam widget, nah cara lain untuk menghemat tempat pada blog kita yaitu dengan membuat menu tab view ini.
Contohnya kaya gini nih 

 Lumayan bagus kan?
Nih saya kasih tau cara dasar pembuatan tab view ini.


 Langkanya :
 1. Login ke blogger >> Rancangan >> Edit HTML
 2. Jangan lupa backup dulu template kamu untuk mengantisipasi hal-hal yang tidak diinginkan (Caranya klik download template lengkap yang ada pada menu Edit HTML).
 3. Klik Expand widget lalu takan CTRL+F (ini merupakan cara mencari kode dengan mudah dan cepat), selanjutnya cari kode </head>. Kemudian letakkan kode dibawah ini sebelum kode </head>

    <script src='http://u-sup.googlecode.com/files/tabview.js' type="text/javascript"/>

Belum selesai teman..
 4. Selanjutnya cari kode ]]></b:skin> dan letakkan kode dibawah ini sebelum kode ]]></b:skin>

     div.TabView div.Tabs

    {

    height: 30px;

    overflow: hidden;

    }

    div.TabView div.Tabs a

    {

    float: left;

    display: block;

    width: 98px; /* Lebar Menu Utama Atas */

    text-align: center;

    height: 30px; /* Tinggi Menu Utama Atas */

    padding-top: 3px;

    vertical-align: middle;

    border: 1px solid #BDBDBD; /* Warna border Menu Atas */

    border-bottom-width: 0;

    text-decoration: none;

    font-family: "Verdana", Serif; /* Font Menu Utama Atas */

    font-weight: bold;

    color: #000; /* Warna Font Menu Utama Atas */

    -moz-border-radius-topleft:10px;

    -moz-border-radius-topright:10px;

    }

    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active

    {

    background-color: #E6E6E6; /* Warna background Menu Utama Atas */

    }

    div.TabView div.Pages

    {

    clear: both;

    border: 1px solid #BDBDBD; /* Warna border Kotak Utama */

    overflow: hidden;

    background-color: #E6E6E6; /* 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. Klik simpan perubahan.
     Catatan: Kode yang warna putih merupakan kode warna pada tab view, ganti warna tab view sesuai selera Anda.
Masih belum selesai juga teman.
 6. Selanjutnya silahkan klik Element laman
 7. Klik Tambah gadget dan pilih HTML/JavaScript dan masukkan kode berikut didalamnya!

    <form action="tabview.html" method="get">

    <div class="TabView" id="TabView">

    <div class="Tabs" style="width: 300px;">

    <a>Tab 1</a>

    <a>Tab 2</a>

    <a>Tab 3</a>

    </div>

    <div class="Pages" style="width: 300px; 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>

 8. Klik simpan.

Catatan lagi:
    Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan ganti sesuai dengan isi.
    Kode yang berwarna biru silahkan isi dengan judul - judul dari menu.
    Dan yang berwarna hijau, adalah isi dari menu. Bisa menambahkan link, gambar, banner, dll.
    Nah kali ini baru selesai teman.
  
Kalau ada yang kurang dimengerti, tinggalkan komentar !
Selamat Berkreasi.