Cara Membuat Tab View Blog atau Website - 2

Tampilan Tab View

Tabview merupakan salah satu metode untuk menghemat ruang halaman blog yang dapat dimanfaatkan antara lain untuk menampilkan teks judul posting, komentar pengunjung terakhir dan terpopluer website atau blog dengan menggunakan kode kode-kode script.

Walaupun tampilannya berbeda dengan tab menu horizontal dan dropdown menu namun fungsi kedua sarana ini hampir sama yaitu untuk menampilkan judul maupun halaman posting.

Cara membuat membuat Tab view blog atau Website menggunakan gadget HMTL/JavaScript dapat dilakukan dengan langkah-langkah sebagai berikut, yaitu:

1. Sign in di blog
2. Klick Rancangan
3. Klick Add gadget/tambah gadget
4. Pilih HTML/JavaScript. 
5. Copy lalu paste kode di bawah ini dalam HTML/JavaScript yang baru ditambahkan

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 94px; /* Lebar Menu Utama Atas */
text-align:center ; background-color: #006b6b; height: 26px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:2px; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana",Arial; /* Font Menu Utama Atas */
font-weight:bold; color:#fff; /* 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: #009999; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:4px solid #006b6b; /* Warna border Kotak Utama */ overflow:hidden; background-color:auto; /* 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: 5px 5px}
</style>
<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>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 284px;" class="Tabs">
<a>Terkini</a>
<a>Terpopuler</a>
<a>Terkomentari</a>
</div>
<div style="width:284px; height:371px; " class="Pages">
<div class="Page">
<div class="Pad">

Tempatkan kode script di sini

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

Tempatkan kode script di sini

</div>
</div>

Catatan:
Teks tempatkan kode script di sini adalah untuk menempatkan kode script

6. Klick simpan untuk menyimpan perubahan

Setelah melakukan step yang diuraikan di atas klick Lihat untuk melihat hasilnya. (248 Blog).