Beranda » Uncategorized » Membuat Menu Multi Tab

Membuat Menu Multi Tab

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

CV. Studio Web, sebuah perusahaan jasa pembuatan web SEO friendly, jasa desain blog, google adwords, jasa SEO profesional. Hubungi CS Kami telpon/SMS/WA: 082310361484 (Puspa) PIN BB: SEO2402 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

Cara mudah mencari rasa tentram

Cara mudah mencari rasa tentram

T 13 September 2012F A Darmanto SEO

Cara mudah mencari rasa tentram.Mencari rasa tentram itu mungkin banyak jalan yang di lakukan oleh sobat Darmanto.Tapi pada malam jumat ini ada satu tips mudah dalam mencari rasa tentram. Dalam kehidupan kita sehari-hari tentulah banyak mengalami berbagai macam persoalan yang... Selengkapnya

Cara Membuat Tombol Share On Facebook,Digg dan Twitter

Cara Membuat Tombol Share On Facebook,Digg dan Twitter

T 5 December 2011F A Darmanto SEO

Selamat pagi sahabat Darmanto semua,semoga masih tetap semangat dalam beraktifitas and Happy Blogging.Dalam artikel ini,saya ada Tutorial Blog tentang Cara membuat tombol Share on facebook,Digg dan Twitter. Membuat tombol share on facebook,digg dan twitter adalah salah satu tips blog buat... Selengkapnya

25 Presiden Of Indonesia 2014,Doraemon Kandidat Terkuat Ke 4

T 28 November 2013F A Darmanto SEO

Ada-ada saja ya poling sebuah situs. Dari 25 kandidat Prsiden Of Indonesia 2014 yang sudah masuk berdasarkan usulan dari para pengunjung banyak nama-nama calon presiden favorit 2014 yang lucu-lucu namun ternyata yang vote lumayan banyak. Bayangkan saja dari 25 kandidat Prsiden Of Indonesia... 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