Membuat Menu Tab View

Kali ini kita akan membuat menu Tab View yang berguna untuk tidak memperbanyak widget dalam blog kita, dalam satu menu Tab View bisa digunakan hingga 5 widget. Jadi kita tidak memakan banyak widget. Baik lah langsung saja kita ke Tutorialnya :

• Log in ke blogger
• Rancangan – Edit HTML
• Kemudian simpan kode di bawah ini diatas kode ]]></b:skin> :

div.TabView div.Tabs { height: 30px; overflow: hidden; } div.TabView div.Tabs a { float: left; display: block; width: 98px; /* Lebar Menu Utama Atas */ background: #CCC; text-align: center; height: 30px; /* Tinggi Menu Utama Atas */ padding-top: 3px; vertical-align: middle; border: 1px solid #999; /* Warna border Menu Atas */ border-bottom-width: 0; text-decoration: none; color: #cd5a1b; font-family:"Arial", Helvetica, sans-serif; /* Warna Font Menu Utama Atas */ } div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background: #E6E6E6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEips74-49aQVWHmcoHjryxqVSZ6hO0400yNsgWH2NZNmpS_ah6TGfDbiSzXUAvshfgVlSUTKX_jBIsi3ZyBNQmXacKicVc8PvOn-ZEoe723-p-9NvjOKA4Utho3beZ0jlNsQ2tINAaViScY/s800/nav_bg.png); color: #FFF; font-family:"Arial", Helvetica, sans-serif;  /* Warna background Menu Utama Atas */ } div.TabView div.Pages { clear: both; border: 1px solid #999; /* Warna border Kotak Utama */ overflow: hidden; background-color: #CCC; /* 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: 3px; }

• Lalu simpan kode dibawah ini diatas kode </head> :

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

• Setelah itu simpan template
• Kemudian elemen halaman - tambah widget – HTML/Javascript
• Lalu masukkan kode dibawah ini

<form action="tabview.html" method="get"> <div class="TabView" id="TabView"> <div class="Tabs" style="width: 300px;"> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a> </div> <div class="Pages" style="width: 300px; height: 250px;"> <div class="Page"> <div class="Pad"> Isi dari Tab 1.1 <br /> Isi dari Tab 1.2 <br /> Isi dari Tab 1.3 <br /> </div> </div> <div class="Page"> <div class="Pad"> Isi dari Tab 2.1 <br /> Isi dari Tab 2.2 <br /> Isi dari Tab 2.3 <br /> </div> </div> <div class="Page"> <div class="Pad"> Isi dari Tab 3.1 <br /> Isi dari Tab 3.2 <br /> Isi dari Tab 3.3 <br /> </div> </div> </div> </div> </form> <script type="text/javascript"> tabview_initialize('TabView'); </script>

Nah, mudah kan teman-teman. Semoga berhasil ya kawan, dan jangan lupa tinggalkan kritik dan saran anda. Trim’s

Share it to your friends..!