Membuat menu Tab view

Saya tidak akan panjang lebar menerangkan apa itu Tab View dan apa fungsinya karena sebenarnya sudah banyak artikel yang menerangkan bagaimana cara pembuatan Tab view pada blog dan apa fungsinya.

Yang ingin saya utarakan di sini bahwa Tab view sebenarnya berfungsi bukan hanya untuk menu artikel atau tulisan-tulisan saja, tetapi juga ternyata dapat digunakan untuk tampilan slide tv live streaming seperti pada blogku ini, dan untuk membuat tv livestream dapat di baca di sini dan di sini. Langsung aja yah...

Langkah 1 :

1. Pilih menu Layout Edit HTML
2. Jangan lupa simpan dulu template anda untuk berjaga-jaga apabila terjadi suatu kesalahan pada penambahan fungsi ini, lalu
3. Tidak usah diberi tanda centang pada Expand Widget Templates, biar gak pusing ngeliat kode yang aneh-aneh.
4. Kemudian masukkan kode di bawah ini tepat di atas kode ]]></b:skin>

Script di atas kode ]]></b:skin>

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

4. Perhatikan text-text yang berwarna merah di atas, itu adalah keterangan untuk pengaturan warna dari Tab View yang kita buat, ukuran panjang lebar dll yang disesuaikan dengan keinginan anda dan untuk pengaturan kode warna HTML dapat dilihat di sini
5. Setelah pengaturan selesai, sekarang pasang kode di bawah ini tepat di atas kode </head>

Script 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 != "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>

6. Kemudian Save atau Simpan Template

Ok..sobat, langkah pertama udah selesai, ngopi dulu ah....
setelah minum kopi selesai kita lanjutkan ke langkah kedua..

Langkah 2 :

1. Kita masuk ke Tata Letak dan Elemen Halaman
2. Tambah Gadget (terserah sobat mau ditaruh di mana nantinya)

3. Copy kode di bawah ini pada HTML/Javascript dan kasih judul terserah sobat, gak dikasih judul juga gak apa-apa.

Code pada New Widget

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">

<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>

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

<div class="Page">
<div class="Pad">

Tab1.1<br/>
Tab1.2<br/>
Tab1.3<br/>

</div>
</div>


<div class="Page">
<div class="Pad">

Tab2.1<br/>
Tab2.2<br/>
Tab2.3<br/>

</div>
</div>


<div class="Page">
<div class="Pad">

Tab3.1<br/>
Tab3.2<br/>
Tab3.3<br/>

</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Sedikit keterangan :
1. Tulisan yang berwarna merah di atas, sobat bisa menggantinya dengan judul menu tab sobat, misalnya kalo pada blogku ini dengan chanel TV, RCTI, METROTV, dll.

2. Tulisan yang berwarna biru adalah isi dari Tab View sobat dan dapat sobat ganti dengan link, gambar, banner, script , embed tv livestream dll

3. kemudianSAVE dan lihat hasilnya.

Selesai deh....

Untuk contoh tampilan tab view di atas dapat dilihat di sini

Selamat mencoba yah...


http://dsindangheula.blogspot.com/
-----------------------------------------------------------

Artikel yang berhubungan

Lihat semua postingan >>Di sini<<