Membuat Tab View / Multi Tab di Blog

Sederhana saja ya :
1. Login Blogger
2 . masuk ke rancangan
3. klik EDIT HTML
4. Pastekan Script Di bawah ini di bawah kode ]]></b:skin>

div.TabView div.Tabs{height: 24px;overflow: hidden;}div.TabView div.Tabs a{float: left;display: block;width: 84px; text-align: center;height: 24px;
padding-top: 3px;vertical-align: middle;border: 1px solid #999999;
border-bottom-width: 0;text-decoration: none;font-family: "Times New Roman", Serif;
font-weight: 900;color: #1E62B6;
}div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{background-color: #FFFFFF;
}div.TabView div.Pages{clear: both;border: 1px solid #999999;
overflow: hidden;background-color: #FFFFFF; }div.TabView div.Pages div.Page{height: 100%;padding: 0px;overflow: hidden;}div.TabView div.Pages div.Page div.Pad{padding: 3px 5px;}

 keterangan, kamu bisa mengatur desainnya dengan memperhatikan kode berikut:
- 84 untuk mengatur lebar menu utama atas
- 24 untuk mengatur tinggi menu utama atas
- 999999 adalah kode warna border pada menu atas
- 1E62B6 adalah kode warna font menu utama atas
- FFFFFF adalah kode warna background menu utama atas
- 999999 adalah kode warna border kotak utama
- FFFFFF adalah kode warna background kotak utama

kemudian Cari Kode </head> lalu letakkan script di bawah ini sebelum kode </head>

<script type='text/javascript'>function tabview_aux(TabViewId, id){var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;var i = 0;
do{if (Tab.tagName == &quot;A&quot;){i++;Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;Tab.blur();}}while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;
var Page = Pages.firstChild;var i = 0;
do{if (Page.className == &#39;Page&#39;){i++;if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;Page.style.overflow = &quot;auto&quot;;Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;}}while (Page = Page.nextSibling);}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }</script>

Klik simpan template, lalu kembali ke page element / edit tata letak, klik add gadget atau tambah gadget lalu pilih HTML / Javascript, kemudian masukkan kode berikut didalamnya:

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

 Keterangan:
- kode berwarna hijau untuk mengatur tinggi dan lebar tab view
- kode berwarna orange ganti dengan judul tabview (contoh: recent, arsip, label)
- kode berwarna biru ganti dengan widget yang mau diisi di tabview (contoh: gambar, link blogroll, script, dll)




sumber