Cara Membuat Menu Tab View

Menu tab view ini di gunakan untuk meminimalisasikan blog anda yang dapat memuat 3kolom yang dapat anda pegunakan dan dapat mempercantik blog anda. warna pada menu tab view ini jg dapat di atur warnanya sesuai warna template pada blog anda. untuk menjadikan isi pada menu tab view ini lebih maksimal anda bisa menggunakan link open new tab atau window baru, apa bila sahabat blum mempunyai script link open new tab anda bisa dapatkan disini.
Tampilan gambar menu tab view:



Untuk menempatkan script ini tidaklah sulit anda hanya butuh ketelitian karna script membuat menu tab view ini lumayan banyak.
1. Login ke blogger anda lalu pilih menu "Layout --> Edit HTML"
2. Berikutnya cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode
]]></b:skin> atau kedalam tag CSS.

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;
}
4. Lihat text-text yang berwarna merah, ini keterangan untuk pengaturan Menu Tab View. pergantian warna dengan memasukkan kode warna dll.
5. Selanjutnya yaitu pasang kode berikut ini sebelum 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. Setelah itu "Di save"
7. Lalu klik menu "Page Elements"
8. PIlih "Add a Gadget" --> "HTML/Javascript" pada tempat yg akan di letakkan Manu Tab View ini.
9. Ini script yg harus kamu pasang :

<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>
Keterangan :
- Angka2 atau text yang berwarna merah (260px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna biru Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna kunung adalah isi dari tabview tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Selamat mencoba.

Related Posts by Categories