Wednesday, August 10, 2011

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

5 comments:

  1. kalo buat 2 tabview dlam saru halaman blog, bisa nggak sob???..

    btw bagi kodenya dunk yg dipake di blogroll, scroolbar yg pakai garis dipinggir ... :) .. thank's b4

    ReplyDelete
  2. @Shinobi Blog:bisa sob... anda tinggal hapus kode pada "isi content tab 3" yaitu pada :
    div class="Page"
    div class="Pad"
    Isi konten tab 3
    dan 2 "div" si bawahnya

    ReplyDelete
  3. @Shinobi Blog:untuk pertanyaan nomor 2.akan saya kirim kodenya. mohon di tunggu yach :)

    ReplyDelete
  4. maksih sob.. udah dijawab....

    sekalian saia udah follow n' pasang linknya... follback n' backlink ya sob....,

    ReplyDelete
  5. @Shinobi Blog:sama2 sob.saya senang apabila anda puas..

    sib sob..oy ngomong2 udah ganti domain yach??hehe selamat yach sob :)
    link sobat sudah saya pasang silahkan dicek :)

    ReplyDelete

Mohon tinggalkan jejak/komentar sobat disini. Dilarang SPAM. Okey...