Membuat Menu Multi Tab View Di Blog

Selamat pagi sobat blogger, di cuaca yang sedang hujan ini fuad-xp akan berbagi tentang tips blogging lagi yang sebelumnya saya pernah membahas tentang Membuat Blockquote Di Blog. Dan kali ini saya akan membahas tentang Membuat Menu Multi Tab View Di Blog. Menu ini digunakan agar menghemat ruang menu pada blog, karena dapat memuat 3 menu sekaligus.

Jika ingin membuatnya, silakan ikuti langkah-langkah berikut ini.

• Login ke akun Blogger Anda.
• Pilih menu Rancangan > Elemen Laman > Tambah Gadget.
• Lalu pilih menu HTML/Javascript.
• Kemudian copy-paste kode berikut ini.

<style>
/* modifikasi by fuad-xp */
div.TabView div.Tabs
{
height: 25px;
overflow: hidden;
}
div.TabView div.Tabs a
{
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
float: left;
display: block;
width: 81px;              /* lebar Tabs Utama */
text-align: center;
height: 25px;            /* Tinggi Tabs Utama */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #ffffff;                             /* Warna border Tabs Utama */
border-bottom-width: 0;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;    /* Font Tabs Utama */

font-weight: bold;
color: #00FF00; /* Warna Font Tabs Utama */
}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
color: #ffffff; /* Warna font yang aktif */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #ffffff; /* Warna border Content */
overflow: hidden;
background-color: #666666; /*Warna background Content*/
}

div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 5px 5px;
color: #000000;        /* Warna Font content */
}
</style>

<script type="text/javascript">
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: auto;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
</div>

<div style="width: auto; height: 300px;" class="Pages"> <!-- height: 300px; adalah tinggi kotak content -->
<div class="Page">
<div class="Pad">

Isi content tab 1

    </div>
</div>

<div class="Page">
<div class="Pad">

Isi content tab 2

    </div>
</div>

<div class="Page">
<div class="Pad">

Isi content tab 3

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

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

• Lalu simpan dan lihat hasilnya.

Apabila sobat blogger mempunyai kesusahan dalam membuatnya atau sobat blogger tidak mengerti dengan kode-kode tersebut, silakan berkomentar di kotak komentar di bawah ini.

Semoga Bermanfaat ^_^

Blogging , Informasi , Tips n' Trik