Cara Membuat Menu Tab View (2)

Sebelumnya, kita juga sudah membahas cara Cara Membuat "Menu Tab View (1)", tapi menu tabview yang kita bahas sekarang mempunyai tampilan kotak pada judulnya, (silahkan sobat lihat perbedaan antara menu tabview yang sedang kita bahas dengan menu tabview yang sebelumnya).

cara membuatnya sama dengan menu sebelumnya, Bagi sobat yang ingin memasang widget ini, ikuti langkah dibawah :

1. Silahkan login ke blogger dengan ID sobat tentunya.
2. Klik Tata Letak.
3. Klik Edit HTML.
"Jangan lupa backup template sobat terlebih dahulu dengan mengklik Download Template Lengkap. ini berguna apabila terjadi kesalahan dalam pengeditan HTML, sobat tidak usah khawatir, cukup di upload lagi"..

4. Kemudian letakkan Script Dibawah diatas kode ]]></b:skin>

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

5. Cari (ctrl+f) kode </head>
6. Lalu letakkan script dibawah diatas 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>

6. Kemudian Simpan Template.
7. Langkah selanjutnya klik Tata Letak.
8. Klik Elemen Halaman dan Add Gadget.
9. Pilih yang HTML / Javascript, dan tambahkan kode Dibawah kedalamnya.

<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><noscript><a href="http://www.centro.web.id" title="Centro Indonesia"><strong>software, tips blog, ebook, bisnis online
</strong></a></noscript>

10. Kemudian Simpan.


Keterangan :

• Kode yang berwarna biru tebal silahkan sobat isi dengan judul - judul dari menu.
• Dan yang berwarna biru tipis, adalah isi dari menu. Sobat bisa menambahkan link, gambar, banner, dll.

Good luck....