Membuat Menu TAB View dengan HTML/JavaScript

Membuat Menu TAB View dengan HTML/JavaScript

Assalamualaikum WR... WB...

Pada pertemuan kali ini saya ingin mengulas kembali tentang cara membuat menu TAB View. Kemarin saya sudah memposting tentang cara membuat menu TAB View 3 kolom...  tetapi cara yang kemarin buatku telalu ribet,,, yaitu kita harus pergi ke Edit HTML dulu,,, setelah selesai kita masih harus memasang kode lagi ke HTML/Java script nya lagi... Ribet banget kan...???

Nah...! Untuk cara yang kita pelajari kali ini cukup mudah kok sobat blogger.., sobat tidak perlu pergi ke Edit HTML Segala,,,, Tetapi sobat hanya menambahkan kode/script saja di HTML/JavaScript. Tentu dengan menu tab view ini, kita akan menghemat lebih banyak tempat....
Nah Berikut caranya untuk membuatnya....

Cara Membuat Menu Tab View
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode script berikut ini:

<div><style type="text/css">
    div.TabView div.Tabs
    {height: 30px;overflow: hidden}
    div.TabView div.Tabs a {float:left; display:block; width: 77px; /* Lebar Menu Utama Atas */
    text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
    padding-top:8px; vertical-align:middle; border:1px solid #999999; /* Warna border Menu Atas */
    border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
    font-weight:bold; color:#000000; /* 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: #333333; /* Warna background Menu Utama Atas */ }
    div.TabView div.Pages {clear:both; border:1px solid #999999; /* Warna border Kotak Utama */ overflow:hidden; background-color:#333333; /* 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: 260px;" class="Tabs">
    <a>Terbaru</a>
    <a>Komentar</a>
    <a>Iklan</a>
    </div>
    <div style="width:260px; height:280px; " class="Pages">
    <div class="Page">
    <div class="Pad">
   
<script style="text/javascript" src="http://duniaanda.googlepages.com/typoxp-recentposts.js">
</script>
<script style="text/javascript">
var numposts = 10;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://abdu-green.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script>
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
<script style="”text/javascript”" src="http://duniaanda.googlepages.com/typoxp-recentcomments2.js">
</script>
<script style="text/javascript">
var numcomments = 10;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://abdu-green.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>
       </div>
    </div>

    <div class="Page">
    <div class="Pad">
   <script src="http://kumpulblogger.com/sca.php?b=6024" type="text/javascript"></script>
    </div>
    </div>
    </div>
    </div>
    </form>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script><div></div></div>

Dibawah ini adalah beberapa penjelasan yang harus sobat blogger ketahui dari script di atas:

• Menu TAB View diatas adalah tab view yang saya pakai, silahkan diganti beberapa kode warna yang sesuai dengan blog sobat. Contohnya : ganti 333333 dan 000000 dengan FFFFFF jika warna dasar blog sobat adalah putih.
• Sobat blogger juga dapat mengganti lebar dan tinggi menu tab view dengan merubah width:260px; height:280px sesuai dengan lebar dang tinggi sidebar blog Anda.
• Dan juga jangan sampai lupa untuk mengganti abdu-green dengan sub domain blog Sobat blogger tentunya.

Ok Kawan,, Saya kira sampai disini pembahasan kita,,, Salam Sejahtera untukSobat Blogger semuanya.. Jangan lupa tetap jaga kesehatan,,, agar kita semau tetep bisa salhing berbagi dan bersilaturrahmi...
Sampai ketemu di peretemuan selanjutnya...
Atas kurang dan lebihnya.. dimohon untuk mencurahkan semua unek2nya di kolom komentar ya sobat blogger.....

Wassalamualaikum WR... WB...