Cara membuat menu tab view

Menu tab view yang dimaksud adalah menu yang dapat berisi atau memuat 2 atau3 menu dalam satu tab menu,sehingga bisa sangat hemat tempat.Kereen kan,stu tempat bisa diisi 3 menu sekaligus.Selain itu menu tab view akan mempercantik tampilan dari blog kita.
Kayak apa ya menu tab view yang dimaksud,contohnya bisa dilihat pada sidebar blog ini yang ada tulisannya top tutorial itu lho...
Atau seperti ini ni:

Oke selanjutnya kita mula untu membuatnya.
1.Masuk Dashboard >> Design dan pilih edit HTML

2.Untuk berjaga jaga bila ada kesalahan sebaiknya back up template terlebih dahulu,dengan cara klik Download Full Template
3.Cari kode ]]></b:skin> .Untuk mempermudahnya tekan Ctrl+F dan paste kode tersebut pada kotak Find

 4.Setelah ketemu copy kode dibawah ini sebelum kode ]]></b:skin>
 

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 100px; /* Lebar Menu Utama Atas */
text-align: center;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-radius-topleft: 8px;
-webkit-border-radius-topright: 8px;
-khtml-border-radius-topleft: 8px;
-khtml-border-radius-topright:8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #999999; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #1E62B6; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #999999; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FFFFFF; /* 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 5px;
}

KET: Ganti warna,ukuran yang dikasih keterangan text berwarna biru sesuai dengan ukuran dan warna yang akan digunakan

5.Setelah itu cari kode  </head>
Car mencarinya seperti diatas.Setelah ketemu copy kode berikut diatasnya atau sebelum kode </head> tersebut:

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

6.Simpan template
Langkah selanjutnya adalah pilih Design >> Tambah Gadget

Pilih HTML/javaScript dan paste kode berikut:

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 303px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>
<div class="Pages" style="width: 298px; height: 270px;">

<div class="Page">
<div class="Pad">
Isi Tab 1.1 <br />
IsiTab 1.2 <br />
Isi Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Isi Tab 2.1 <br />
Isi Tab 2.2 <br />
Isi Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Isi Tab 3.1 <br />
Isi Tab 3.2 <br />
Isi Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Klik simpan