Beranda » Uncategorized » Membuat Menu Multi Tab

Membuat Menu Multi Tab

T Diposting oleh pada 10 May 2012
F Kategori
b Belum ada komentar
@ Dilihat 409 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…

Diposting oleh

Owner CV. Studio Web, sebuah perusahaan jasa pembuatan website SEO, jasa desain blog, google adwords, jasa SEO profesional. Hubungi CS Kami telpon/SMS/WA: 082310361484 (Puspa) untuk respon layanan cepat

Belum ada Komentar untuk Membuat Menu Multi Tab

Silahkan tulis komentar Anda

Your email address will not be published. Required fields are marked *

*

a Artikel Terkait Membuat Menu Multi Tab

3 Paket Pasang Iklan Murah Untuk Bisnis Anda

T 7 January 2013F A Darmanto SEO

Pasang Iklan murah di jaringan website Darmanto.com untuk Anda para pemilik usaha online yang ingin meningkatkan populeritas dan peningkatkan omset usahanya.Layanan pasang iklan ini terbagi menjadi beberapa kategori iklan yang bisa Anda pilih sesuai budget Anda: 1.Paket Iklan bulanan ekslusive... Selengkapnya

Daftar Layanan Jasa Website Darmanto

Daftar Layanan Jasa Website Darmanto

T 9 November 2013F A Darmanto SEO

Daftar Layanan Jasa Website Darmanto ini saya buatkan secara khusus di halaman ini  karena saya ,masih sering ditanya apa saja sih layanan jasa website darmanto yang bisa diberikan.Ok lansung saja Daftar layanan jasa website saya tuliskan sebagai berikut: var numposts... Selengkapnya

Cara Membuat Recent Post Per Label Tanpa Javascript

T 23 February 2014F A Darmanto SEO

Selamat siang sobat Darmanto semua dan selamat menikmati hari libur ini.Cara Membuat Recent Post Per Label siang ini akan saya buatkan tutorialnya tapi tidak menggunakan/tanpa JavaScript.Penggunaan recent post ini cukup mudah juga seperti cara membuat recent post per label fast... Selengkapnya

+ SIDEBAR

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