MEMASANG MENU TAB VIEW

Menu tab view adalah susunan menu yang sering diletakkan pada sidebar dan dalam bentuk bar. Menu tab view digunakan biasanya untuk menyikapi ruang sempit pada layout template [Lihat tampilan menu tab view pada sidebar blog ini]. Untuk memasang menu tab view pada sidebar blog, silahkan ikuti tips dan tutorial berikut:

• Masuk ke Design > Edit HTML template blog kamu dan cari kode ]]></b:skin> [Tekan Ctrl+F untuk memudahkan pencarian dengan memasukkan kode ]]></b:skin>. Setelah ketemu, letakkan kode berikut diatas kode ]]></b:skin>:

/*----MENU TAB VIEW----*/
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Times New Roman, Serif;
font-weight: 900;
color: #000080;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #BDBDBD;
}
div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF;
border: 1px solid #000000;
overflow: hidden;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

• Setelah itu cari kode </head> dan pastekan kode berikut diatasnya:

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

• Sampai ke tahap ini, simpan template kamu. Selanjutnya masuk ke elemen halaman [Layout], kemudian tentukan di mana kamu akan meletakkan menu tab view anda sendiri (Mungkin di sidebar kanan/kiri/bawah/atas), klik add gadget atau tambah gadget, pilih Javascript/HTML lalu pastekan kode di bawah ini:

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Isi tab 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

dan simpan. Selesai sudah!

Personalisasi tampilan Menu Tab View
Kamu bisa menyesuaikan tampilan menu tab view pada blog kamu dengan melakukan perubahan pada value. Perubahan ini hanya menyasar kepada warna, font, background, padding dan fleksibel value lainnya. Cobalah untuk mengganti value tersebut dengan nilai yang berbeda dan lihat tampilan/hasilnya pada blog.

Selamat mencoba dan lanjutkan kreatifitas!

Posted in: Blogging,Menu,Modifikasi Template,Tab View,Tutorial