Beranda » Uncategorized » Membuat Menu Multi Tab

Membuat Menu Multi Tab

T Diposting oleh pada 10 May 2012
F Kategori
b Comments Off on Membuat Menu Multi Tab
@ Dilihat 181 kali
Membuat Menu Multi Tab.Sobat Darmanto semua,sudah lama juga catatan ini ngga di update ya….Nah Pada update catatan saya kali ini saya akan berbagi catatan mengenai Cara membuat menu multi tab.Membuat menu multi tab ini adalah kelanjutan dari catatan beberapa waktu yang lalu mengenai Cara membuat halaman blog.

Membuat menu multi tab seperti gambar di samping adalah bertujuan menghemat tempat dan menambah kerapian blog atau web.
Artikel yang membahas cara membuat menu multi tab sebenarnya juga sudah banyak yang membagikannya.Oleh karena itu,semoga saja update saya ini masih ada manfaatnya heheheee…
Sebenarnya sangat sederhana dalam membuat menu multi tab atau banyak juga yang menyebut widget multi tab,dan berikut ini sobat Darmanto bisa ikuti langkah-langkah membuat menu multi tab berikut ini:

  1. Login ke blog dengan ID anda
  2. Pilih menu Rancangan » masuk ke Edit HTML
  3. Cari kode ini ]]></b:skin>
  4. Copy lalu paste kode berikut ini diatas 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;
    }

  5. Kemudian pasang kode berikut diatas kode </head>
  6. <script type=’text/javascript’>
    function tabview_aux(TabViewId, id)
    {
    var TabView = document.getElementById(TabViewId);

    // —– Tabs —–

    var Tabs = TabView.firstChild;
    while (Tabs.className != “Tabs” ) Tabs = Tabs.nextSibling;

    var Tab = Tabs.firstChild;
    var i = 0;

    do
    {
    if (Tab.tagName == “A”)
    {
    i++;
    Tab.href = “javascript:tabview_switch(‘”+TabViewId+”‘, “+i+”);”;
    Tab.className = (i == id) ? “Active” : “”;
    Tab.blur();
    }
    }
    while (Tab = Tab.nextSibling);

    // —– Pages —–

    var Pages = TabView.firstChild;
    while (Pages.className != ‘Pages’) Pages = Pages.nextSibling;

    var Page = Pages.firstChild;
    var i = 0;

    do
    {
    if (Page.className == ‘Page’)
    {
    i++;
    if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+”px”;
    Page.style.overflow = “auto”;
    Page.style.display = (i == id) ? ‘block’ : ‘none’;
    }
    }
    while (Page = Page.nextSibling);
    }

    // —– Functions ————————————————————-

    function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

    function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
    </script>

  7. Kemudian klik Save Template
  8. Masuk ke menu Page Elements
  9. 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>

  10. Lalu klik Save dan tempatkan widget tab view agar sesuai dengan template anda.
  11. Selesai

Catatan:

  • Angka yang berwarna merah adalah ukuran lebar dan tinggi widget tab view.
  • Kode yang berwarn KUNING adalah teks pada menu utama di bagian atas.
  • Kode yang berwarna biru adalah teks yang berada di halaman tab view yang bisa kamu isi dengan link apa saja, gambar, banner dan script lainnya.

Ok sobat Darmanto,begitulah cara membuat menu multi tab yang semoga bermnafaat bagi sobat yang belum bisa membuat menu multi tab ini ya…

Komentar dinonaktifkan: Membuat Menu Multi Tab

Maaf, form komentar dinonaktifkan untuk produk/artikel ini

a Artikel Terkait Membuat Menu Multi Tab

Arsitek Mandor Tukang Bangunan Di Wilayah Bekasi

T 28 September 2014F A admin

Arsitek Mandor Tukang Bangunan Di Wilayah Bekasi – Punya rencana mau bangun rumah ? mungkin kita bingung juga ya mikir arsitek terbaik di bekasi itu siapa ya ? he he he , mana saya tahu pak. Tapi kalau mau cari... Selengkapnya

Cara Membuat Semut Berjalan di Blog

Cara Membuat Semut Berjalan di Blog

T 30 June 2014F A admin

Catatan Membuat efek animasi semut berjalan di blog ini terinspirasi saat sedang blogwalking ke sobat-sobat blogger yang sudah berkunjung ke blog Darmanto ini.Setelah beberapa waktu lalu pada catatan ini saya berbagi Cara membuat efek turun salju di blog dan banyak... Selengkapnya

Usaha Budidaya Ternak Burung Lovebird

T 3 November 2015F A admin

Usaha Budidaya Ternak Burung Lovebird  saat ini terus mengalami kenaikkan untuk menjadi salah satu jenis usaha sampingan yang menguntungkan, bahkan saat ini usaha budidaya burung lovebird banyak juga yang sudah menjadikannya sebagai usaha tetap yang hasilnya sangat menggiurkan. Bila Anda... Selengkapnya

+ SIDEBAR
tempat belajar seo

Ada Pertanyaan? Silahkan hubungi customer service kami untuk mendapatkan informasi lebih lengkap mengenai jasa/produk kami.