Beranda » Uncategorized » Membuat Menu Multi Tab

Membuat Menu Multi Tab

T Diposting oleh pada 10 May 2012
F Kategori
b Belum ada komentar
@ Dilihat 340 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 telpon/SMS/WA: 08170133458 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

Oscablenet .com Solusi Kebutuhan IT Networking Anda

T 21 May 2015F A Darmanto SEO

Memenuhi kebutuhan konektivitas Anda baik untuk individu maupun perusahaan kini semakin mudah dengan adanya oscablenet.com. Situs ini merupakan situs penjualan secara online yang menyediakan banyak peralatan untuk memudahkan Anda dalam segala hal yang berhubungan dengan kelistrikan dan koneksi. Begitu masuk... Selengkapnya

Menyusuri Jembatan Cinta Pulau Tidung

T 3 November 2013F A Darmanto SEO

Pulau Tidung yang berada tak jauh dari Jakarta memang menjadi destinasi wisata yang popular. Berada di Kepulauan Seribu, Pulau Tidung tenar dengan dengan pasir putih yang lembut, terumbu karang nan indah dan laut biru yang cantik.  Namun, suguhan Pulau Tidung... 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.