Cara Mudah Membuat Tab View Menu

Menanggapi masih banyaknya temen-temen blogger yang masih kebingungan membuat tab view menu, maka pada postingan saya khusus akan membahas bagaimana mengisi tab view tersebut dengan beberapa widget. Sebagai contoh, tab view menu tersebut akan saya isi dengan widget daftar isi, komentar terakhir dan top komentator.

Jadi dengan membahas cara mudah membuat tab view (update ini, saya tidak hanya membahas masalah yang masih membuat bingung sebagian teman-teman blogger, tetapi saya juga akan memberikan script dari widget daftar isi, komentar terakhir dan top komentator.
Oke biar gak kebanyakan omong lagi, kita akan bahas lagi bagaimana cara mudah membuat tab view sekaligus contohnya biar bagi temen-temen yang masih bingung, tidak akan bingung lagi.
Untuk membuatnya, silahkan ikuti beberapa langkah berikut :
1. Login di akun Blogger Sobat
2. Klik "Rancangan" (Dulunya "Tata Letak") => "Elemen Laman"
3. Klik "Tambah Gadget"
4. Selanjutnya, copas kode di bawah ini :

<style type="text/css">
div.TabView div.Tabs
{height: 40px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 85px; /* Lebar Menu Utama Atas */
text-align:center ; height: 100px; /* Tinggi Menu Utama Atas */
padding-top:1px; vertical-align:left; 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:; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:0px; -moz-border-radius-topright:0px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* 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: 1px 1px}
</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: 270px;" class="Tabs">
<a>Judul Gadget 1 (Misal Daftar Isi)</a>
<a>Judul Gadget 2 (Misal Komentar Terakhir)</a>
<a>Judul Gadget 3 (Misal Top Komentator)</a>
</div>
<div style="width:260px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
ISI TAB VIEW MENU 1 ( Misal : Script Daftar Isi)
</div>
</div>
<div class="Page">
<div class="Pad">
ISI TAB VIEW MENU 2 ( Misal : Script Komentar Terakhir)
</div>
</div>
<div class="Page">
<div class="Pad">
ISI TAB VIEW MENU 3 ( Misal : Script Top Komentator)
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Jadi kalau Anda ingin mengisi tab view menunya dengan widget daftar isi, komentar terakhir dan top komentator, maka kodenya akan seperti ini :

Daftar Isi
Komentar Terakhir
Top Komentator