Tips Membuat Multi TabView Menu

Selamat malam sobat blogger. Tips kali ini kita akan mencoba membuat Multi TabView Menu di sedebar blog. Gadget ini berguna untuk menghemat ruang pada blog karena dapat memuat lebih dari 2-3 menu sekaligus serta dapat memuat banyak link dalam satu content.

Untuk membuatnya, silahkan ikiti langkah-langkah berikut :
1. Login ke akun blogger anda
2. Klik Rancangan > Elemen Laman > Tambah Gadget (Add Gadget) > HTML/JavaScript
3. Kemudian copy-pastekan kode HTML/Javascript di bawah ini

<style>
/* modifikasi by mario */
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>

4. Klik Simpan dan hasilnya seperti gambar dibawah ini

Untuk selebihnya silahkan di kreasikan sendiri sesuai keinginan anda agar Multi TabView Menu anda terlihat semakin bagus dan cantik. Anda juga dapat menambahkan gambar sebagai backgroundnya. 

Apabila ada pertanyaan atau hal yang kurang jelas silahkan berkomentar pada kotak komentar di bawah ini. Selamat mencoba.

Related Post