Beranda » Uncategorized » Membuat Menu Multi Tab

Membuat Menu Multi Tab

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

Manisnya Peluang Bisnis Grosir Busana Muslim

T 12 May 2014F A Darmanto SEO

Grosir busana muslim semakin hari semakin banyak dipilih bagi mereka yang ingin berjualan busana.Selain Grosir pakaian Anak,busana muslim adalah bisnis busana yang menjanjikan manisnya keuntungan yang lumayan besar bagi para pelaku bisnis ini. Cara menjadi Grosir busana muslim juga untuk... Selengkapnya

Cara Membuat Halaman Blog

T 27 March 2012F A Darmanto SEO

Sobat Darmanto semua,salah satu hal yang cukup penting dalam sebuah tampilan blog adalah adanya halaman tambahan dalam blog.Membuat halaman dalam blog atau laman blog seperti halaman kontak,tukar link dan lain sebagainya adalah diperlukan salah satunya agar bisa menjadi pelengkap fitur... Selengkapnya

Membuat Read More Otomatis di Blogspot

Membuat Read More Otomatis di Blogspot

T 26 March 2012F A Darmanto SEO

Membuat Read more otomatis di blogspot.Para sobat semua,setelah pada tutorial bog yang lalu,saya berbagi catatan  membuat read more blogspot,nah pada catatan saya kali ini juga masih akan melanjutkan membuat read more blogspot namun secara otomatis.Sobat semua,biasanya saat ini bila kita... Selengkapnya

+ SIDEBAR

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

Legalitas Usaha

CV. STUDIO WEB
SIUP: 503.9/192/KPPT/PMK/11-22/II/2015
TDP: 112236321645
Akta Notaris no. 01
Detail Legalitas Kami Klik disini

Alamat

Office:
Jl. Raya Gili Tugel – Kreo KM 1, Rt. 039 Rw. 005

Desa Cibuyur, Kec. Warungpring

Kab. Pemalang, Jawa Tengah,52358