Membuat Tab View 3-in-1

Menu tab view adalah sebuah tab menu yang biasanya memuat 2-3 menu sekaligus dalam satu tab menu, selain sebagai pemercantik tampilan pada blog anda, tab ini juga bisa menghemat ruang pada blog anda.

Cara membuatnya, anda  pergi ke menu rancangan/ design, lalu pilih edit html, kemudian anda cari kode seperti ini: ]]></b:skin>
Lalu setelah ketemu, anda copy dan pastekan script dibawah ini sebelum kode diatas.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 84px; /* Lebar Menu Utama Atas */
text-align: center;
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;
}

Untuk merubah/mengedit tampilan warna/font dari tab ini, lihat keterangannya yang diberi warna merah tersebut.
Untuk mencari kode warna bisa dilihat DISINI
Kemudian cari kode </head> pada template anda, lalu anda copy dan pastekan script dibawah 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>

Setelah selesai anda pilih SAVE.
Lalu anda pergi ke page elemen/ elemen halaman,
Pilih Add Gadget -> HTML/ Javascript pilih tempat dimana akan anda letakkan Tab Menu ini.
Lalu pasang/masukkan script dibawah ini:

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

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

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

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

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

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

Keterangan:
Angka yang berwana biru itu adalah ukuran tinggi dan lebar tab menu ini.
Kode dengan warna hijau ini adalah tulisan untuk Menu utama /Menu Atas.
Kode yang berwarna merah adalah isi dari tab view ini, anda bisa mengeditnya sesuka hati anda.

Intinya adalah bagaimana anda mengkreasikan tampilan menu view ini agar terlihat lebih bagus, anda bisa menambahkan hyperlink dari tulisan/artikel anda didalam menunya.

Jika anda masih bingung, anda bisa bertanya dan memberi komentar pada tulisan ini.

Jika anda ingin mencopy artikel ini harap mencantumkan alamat blog ini.

salam blogger.