Cara Membuat Tab View Untuk Pemula

Halo Bloggersz,
Kali ini saya akan memposting Cara Membuat Tab View Untuk Pemula. Dalam postingan kali ini kita akan membuat widget Tab View. Kalian tentu taukan Tab View apa. Tapi Tab View kali ini akan memper mudah bloggersz. Mengapa ? Karena Tab View ini tidak perlu obrak abrik template sampai gak tau harus rapiin kembali templatenya wk :r wk :r wk. Nah langsung ke TKP :
1. Kalian masuk ke blogger.com (jangan nyasar sampai Twitter, apalagi Facebook, nakalan gak ketemu :D ).
2. Kalian pasti habis login langsung ke dashboard jadi sehabis dashboard, ke rancangan/Design.
3. Sehabis Ke design jangan kemana-mana lagi.
4. Lalu klik add gadget dimanapun kalian suka. (jangan klik add gadget di facebook ckckck).
5. Lalu ke HTML/Javascript.
6. Masukkan kodenya:

<style type="text/css">
    div.TabView div.Tabs
    {height: 30px;overflow: hidden}
    div.TabView div.Tabs a {float:left; display:block; width: 80px; /* Lebar Menu Utama Atas */
    text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
    padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
    border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
    font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #e6e6fa; /* Warna background Menu Utama Atas */ }
    div.TabView div.Pages {clear:both; border:1px solid #ffd000; /* Warna border Kotak Utama */ overflow:hidden; background-color:#7b68ee; /* Warna background Kotak Utama */ }
    div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
    div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    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: 300px;" class="Tabs">
    <a>Judul 1</a>
    <a>Judul 2</a>
    <a>Judul 3</a>
    </div>
    <div style="width:100%; height:250px; " class="Pages">
    <div class="Page">
    <div class="Pad">
    Isi menu tab view 1
    </div>
    </div>
    <div class="Page">
    <div class="Pad">
    Isi menu tab view 2
    </div>
    </div>
    <div class="Page">
    <div class="Pad">
    Isi menu tab view 3
    </div>
    </div>
    </div>
    </div>
    </form>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>

Ket: Kuning: ganti dengan judul Widget/ dan sebagainya.
Merah : isi dengan script widget/ sebagainya.
 7. Lalu simpan, dan lihat lah hasilnya
Nah itulah langkah-langkahnya. Mudah kan !?
Akhir kata,
Semoga bermanfaat bagi Bloggersz

(Sumber Code : Blog Tutorial - Free Template - My Themes.com )