Selasa, 03 Januari 2012

Membuat Menu Multi Tab View Di Blog

Selamat pagi sobat blogger, di cuaca yang sedang hujan ini fuad-xp akan berbagi tentang tips blogging lagi yang sebelumnya saya pernah membahas tentang Membuat Blockquote Di Blog. Dan kali ini saya akan membahas tentang Membuat Menu Multi Tab View Di Blog. Menu ini digunakan agar menghemat ruang menu pada blog, karena dapat memuat 3 menu sekaligus.

Jika ingin membuatnya, silakan ikuti langkah-langkah berikut ini.
  • Login ke akun Blogger Anda.
  • Pilih menu Rancangan > Elemen Laman > Tambah Gadget.
  • Lalu pilih menu HTML/Javascript.
  • Kemudian copy-paste kode berikut ini.

    <style>
    /* modifikasi by fuad-xp */
    div.TabView div.Tabs
    {
    height: 25px;
    overflow: hidden;
    }
    div.TabView div.Tabs a
    {
    -moz-border-radius-topleft:10px;
    -webkit-border-top-left-radius:10px;
    -moz-border-radius-topright:10px;
    -webkit-border-top-right-radius:10px;
    float: left;
    display: block;
    width: 81px;              /* lebar Tabs Utama */
    text-align: center;
    height: 25px;            /* Tinggi Tabs Utama */
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid #ffffff;                             /* Warna border Tabs Utama */
    border-bottom-width: 0;
    text-decoration: none;
    font-family: Georgia, "Times New Roman", Times, serif;    /* Font Tabs Utama */

    font-weight: bold;
    color: #00FF00; /* Warna Font Tabs Utama */
    }

    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    color: #ffffff; /* Warna font yang aktif */
    }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #ffffff; /* Warna border Content */
    overflow: hidden;
    background-color: #666666; /*Warna background Content*/
    }

    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 0px;
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 5px 5px;
    color: #000000;        /* Warna Font content */
    }
    </style>

    <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>

    <form action="tabview.html" method="get">

    <div id="TabView" class="TabView">
    <div style="width: auto;" class="Tabs">
    <a>Judul 1</a>
    <a>Judul 2</a>
    <a>Judul 3</a>
    </div>

    <div style="width: auto; height: 300px;" class="Pages"> <!-- height: 300px; adalah tinggi kotak content -->
    <div class="Page">
    <div class="Pad">
    Isi content tab 1
        </div>
    </div>

    <div class="Page">
    <div class="Pad">
    Isi content tab 2
        </div>
    </div>

    <div class="Page">
    <div class="Pad">
    Isi content tab 3
           </div>
        </div>
    </div>
    </div>
    </form>

    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>

    • Lalu simpan dan lihat hasilnya.
    Apabila sobat blogger mempunyai kesusahan dalam membuatnya atau sobat blogger tidak mengerti dengan kode-kode tersebut, silakan berkomentar di kotak komentar di bawah ini.

    Semoga Bermanfaat ^_^

      8 Komentar :

      fadray keren mengatakan...

      GAN!!! BLOG AQU KIRA2 OKE GAKK
      AQU DAH NGIKUTIN CARA YG DIATAS
      NICH BLOG AQU :http://elfaderayz.blogspot.com/blogspot
      follow yaa.,

      Zamrud Hijau mengatakan...

      Info yang baguz sekali untuk disimak.....
      Bermanfaat sekali untuk saya....

      Mohon kunjungan baliknya yaa....
      Dan saya juga sangat berterima kasih sekali kalau anda berkenan FOLLOW dan Backlink Blog sederhana saya.... :-)

      ( http://zamrudhijau.blogspot.com/ )

      nicho liem mengatakan...

      KOk pas di kopy paste ngak bisa ????

      Edyn Laskar mengatakan...

      Sepertinya dulu perna dapat cara membuat yg kayak ghini,, cara yg lebih simple... tapi dimana yah... hufff lupa deh.. ikut yg ini ajalah... makasih yah kang...

      oakleyses mengatakan...

      oakley sunglasses, louis vuitton outlet, kate spade outlet, oakley sunglasses, burberry outlet, nike air max, louis vuitton outlet, replica watches, prada outlet, ray ban sunglasses, ray ban sunglasses, cheap oakley sunglasses, gucci handbags, replica watches, michael kors outlet, christian louboutin outlet, burberry handbags, oakley sunglasses, christian louboutin shoes, christian louboutin uk, michael kors outlet online, ray ban sunglasses, nike free, chanel handbags, louis vuitton, ugg boots, longchamp outlet, uggs outlet, jordan shoes, uggs on sale, tory burch outlet, michael kors outlet online, nike air max, polo outlet, polo ralph lauren outlet online, tiffany jewelry, longchamp outlet, oakley sunglasses wholesale, tiffany and co, nike outlet, uggs outlet, ugg boots, prada handbags, louis vuitton outlet, christian louboutin, louis vuitton, michael kors outlet online

      oakleyses mengatakan...

      north face, sac vanessa bruno, true religion jeans, michael kors, vans pas cher, nike blazer pas cher, nike roshe, kate spade, mulberry uk, air max, hollister pas cher, nike air force, oakley pas cher, true religion outlet, michael kors outlet, longchamp pas cher, nike air max uk, ray ban pas cher, abercrombie and fitch uk, nike roshe run uk, polo ralph lauren, nike tn, ralph lauren uk, nike free run, lululemon canada, guess pas cher, coach outlet, converse pas cher, hogan outlet, north face uk, hollister uk, true religion outlet, nike free uk, michael kors pas cher, timberland pas cher, coach purses, replica handbags, coach outlet store online, sac longchamp pas cher, louboutin pas cher, nike air max uk, sac hermes, burberry pas cher, michael kors, ray ban uk, new balance, polo lacoste, true religion outlet, jordan pas cher, nike air max

      oakleyses mengatakan...

      giuseppe zanotti outlet, nike air max, north face outlet, timberland boots, valentino shoes, north face outlet, babyliss, iphone 6 cases, iphone 5s cases, mac cosmetics, reebok outlet, ferragamo shoes, celine handbags, abercrombie and fitch, louboutin, nike huaraches, lululemon, soccer shoes, hollister clothing, new balance shoes, iphone 6s cases, mcm handbags, jimmy choo outlet, iphone 6s plus cases, s6 case, hermes belt, longchamp uk, ipad cases, wedding dresses, mont blanc pens, hollister, nfl jerseys, bottega veneta, iphone 6 plus cases, ghd hair, herve leger, ralph lauren, chi flat iron, instyler, p90x workout, oakley, soccer jerseys, beats by dre, nike roshe run, vans outlet, iphone cases, nike trainers uk, baseball bats, insanity workout, asics running shoes

      oakleyses mengatakan...

      canada goose uk, supra shoes, pandora jewelry, louis vuitton, canada goose, thomas sabo, toms shoes, barbour uk, barbour, hollister, pandora jewelry, wedding dresses, canada goose, moncler outlet, canada goose outlet, moncler, canada goose jackets, juicy couture outlet, coach outlet, marc jacobs, moncler outlet, links of london, louis vuitton, replica watches, louis vuitton, ugg,ugg australia,ugg italia, karen millen uk, ugg, montre pas cher, pandora uk, canada goose outlet, ugg pas cher, doke gabbana, ray ban, converse outlet, converse, lancel, swarovski crystal, moncler, vans, ugg,uggs,uggs canada, pandora charms, juicy couture outlet, ugg uk, louis vuitton, doudoune moncler, swarovski, hollister, gucci, canada goose outlet, nike air max, moncler

      Posting Komentar

      Silahkan sisipkan komentar jikalau anda berkunjung atau nyasar ke blog ini. Komentar anda sangat berguna dan berharga untuk menjadikan blog ini menjadi lebih baik. Mohon gunakan kata-kata yang sopan dalam berkomentar. Komentar SPAM, SARA dan sejenisnya tidak akan ditampilkan.

       
      Design by Fuad XP | Bloggerized by Fuad XP - Fuad XP Premium | Free Download