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://sinma68.blogspot.com/2010/10/membangkitkan-semangat-belajar-pada.html target="new">Membangkitkan Semangat Belajar</a></li>
<li><a href=http://sinma68.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://sinma68.blogspot.com/2010/09/manfaat-air-putih-bagi-tubuh.html target="new">Manfaat Air Putih Bagi Tubuh</a></li>
<li><a href=http://sinma68.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://sinma68.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

Menarik untuk Dibaca:

Tutorial

• Akibat Jarang Update Blog
• Cara Membuat Email Khusus PNS
• Menampilkan Data Dengan Memasukkan PIN
• Memproteksi dan Menyembunyikan Formula Excel
• Membuat Background pada Excel
• Membuat Tombol Menu Pada Excel
• Menyembunyikan Tab Sheet pada Excel
• Memberi Warna Angka Otomatis di Excel
• Memberi Warna Otomatis pada Cell
• Membuat Widget Label dalam Scrolbar
• Membuat Breadcrumbs Terindeks Google
• Tutorial Melakukan Disput Payza
• Membuat Widget Entri Populer Cantik
• Segera Nonaktifkan Arsip Blog Anda
• Cara Ampuh Melindungi Acoount Gmail
• Menambahkan Rekening Bank ke Payza
• Transfer Saldo Egopay ke Payza
• Menambahkan Kartu Debet Payza ke Akun Paypal
• Cara Membuat Akun Egopay
• Cara Aktivasi Kartu Debit Payza

Trik Blog

• Akibat Jarang Update Blog
• Membuat Widget Label dalam Scrolbar
• Membuat Breadcrumbs Terindeks Google
• Membuat Widget Entri Populer Cantik
• Segera Nonaktifkan Arsip Blog Anda
• Cara Mengatasi Kredensial OpenID
• Mendulang Trafik dan dollar dari Easyhits4u
• Survey Dibayar Dollar dan Triffic
• Menimbang Penting Tidaknya Buku Tamu
• Melihat Posisi Artikel di Google
• Membuat Background pada Judul Sidebar
• Mengatur Gerak Teks Menggunakan Mouse
• 2 Langkah Pasti Mendatangkan 1 Juta Pengunjung
• Cara Mempertahankan Alexarank
• Membuat Artikel Tampil di Halaman Pertama Google
• Cara Membuat Video Dalam Posting
• Cara Membuat 3 Kolom Tambah Gadget
• Ping Spesial Agar Googel Langsung Mengindeks Artikel
• Trik Jitu Mempercepat Loading Blog dengan Compres CSS
• Trik Mengaktifkan Fitur Simpan dan Keluar pada Mozilla Firefox 4