Cara Mudah Membuat Menu Tab View Pada Blog

Kadang kita ribet dengan template yang kita punya, sedangkan widget yang akan dipasang terlalu banyak. Solusinya adalah Membuat Menu Tab View Pada Gadget, sebab tab view menu sangat efisien. Ukuran yang relatif kecil tapi bisa memuat banyak space. Cara seperti ini bisa juga disebut membuat menu yang bisa memuat banyak judul.

Membuat Menu Tab View Pada Gadget ini memerlukan kode HTML yang lumayan panjang dan agak ribet, telitilah baik-baik tutorial ini dan yang paling penting jangan lupa untuk backup template sobat terlebih dahulu untuk mengantisipasi kesalahn dan terjadinya error pada template anda.

Caranya adalah :
Langkah I

• Login Blogger Anda seperti biasanya;


• Klik tombol Rancangan dan pilih Edit HTML;


• Cari kode </head>;


• Jika ketemu copy paste kode dibawah ini diatas kode </head>

<script type='text/javascript'>
//<![CDATA[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>

• Setelah itu letakkan kode berikut diatas kode ]]></b:skin>

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Utama Atas */

text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* 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;
}

 * Catatan I : perhatikan warna merah, modifikasi sesuai dengan template anda.

• Simpan Template

Langkah II

• Klik tab Tambahkan Elemen (Gadget);


• Pilih HTML/JavaScript;


• Copy paste kode dibawah kedalam HTML tersebut;


• Lalu Simpan, selesai.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">

<a>Tab 1</a>

<a>Tab 2</a>

<a>Tab 3</a>

</div>
<div class="Pages" style="width: 300px; height: 250px;">

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

 Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan sobat sesuaikan sendiri dengan isi dari menu yang sobat gunakan. Jadi berantakan atau terlihat jele jika anda salah mengaturnya.

* Catatan II :

• Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan sobat sesuaikan dengan isi yang akan dimasukkan;


• Kode yang berwarna biru silahkan sobat isi dengan judul dari menu tabview;


• Dan huruf yang tercetak tebal, adalah isi dari menu

Semga berhasl dan gak menyesal.....!!!!!!