Membuat Tab View Daftar Isi

Tab View Daftar Isi dapat mengoptimalkan pengunaan ruang/tempat di halaman utama blog apalagi kalau blognya sudah menempatkan bayak widgate di sidebar. Jadi sangat tepat jika Anda bermaksud meringkas daftar isi dari beberapa kategori dalam satu tempat dengan menggunakan tab view. Contoh tab view dapat Anda lihat di blog ini.
Saya meletakkan 3 menu sekaligus dalam satu daftar isi dengan tidak menyita banyak tempat. Selain itu dilihat juga lebih bagus geto lho. Jika Anda berminat membuat tab view seperti di blog ini, silahkan ikuti langkah-langkahnya berikut ini

1. Copy semua kode di bawah ini

="" css="" style="background: none repeat scroll 0% 0% rgb(46, 234, 241);" text="">div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 70px; /* Lebar Menu Utama Atas */
text-align:center ; height: 20px; /* Tinggi Menu Utama Atas */
padding-top:8px; padding-right:2px;vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Trebuchet ms", verdana, Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* 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: #43f33a; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#45e8f7; /* 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: 300px;" class="Tabs">
<a>PENDIDIKAN</a>
<a>KESEHATAN</a>
<a>ANEKA</a>
</div>
<div style="width:220px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
<li><a href=http://informasi2-pendidikan.blogspot.com/2010/10/membangkitkan-semangat-belajar-pada.html target="new">Membangkitkan Semangat Belajar</a></li>
<li><a href=http://informasi2-pendidikan.blogspot.com/2010/10/bagaimana-belajar-yang-baik.html target="new">Trik Belajar Jitu</a></li>
</div>
</div>
<div class="Page">
<div class="Pad">
<li><a href=http://informasi2-pendidikan.blogspot.com/2010/09/manfaat-air-putih-bagi-tubuh.html target="new">Manfaat Air Putih Bagi Tubuh</a></li>
<li><a href=http://informasi2-pendidikan.blogspot.com/2010/09/bahaya-merokok.html target="new">Awas! Bahaya Merokok</a></li>
</div>
</div>
<div class="Page">
<div class="Pad">
<li><a href=http://informasi2-pendidikan.blogspot.com/2010/11/erupsi-merapi-2010-terburuk-sejak-1870.html target="new">Erupsi Merapi Paling Dahsyat</a></li>

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

2. Masuk ke blogger dengan ID Anda, masuk ke dasbor dan pilih rancangan/layout
3. Klik tambah gadget (pilih tepat yang menurut anda tepat)
4. Klik tambah HTML/Javascript, lalu paste di tempat yang disedikan
5. Terakhir klik simpan, dan lihat blog

Catatan:
1. Silahkan Anda ganti nama menu dan link yang berwarna merah sesuai dengan nama menu dan link artikel anda
2. Anda dapat mengganti warna dan lebar/tinggi border yang berwarna biru sesuai dengan selera dan kondisi blog anda.
Selamat mencoba semoga berhasil

Tweet