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

1 Response to "Membuat Tab View Daftar Isi"

  1. Assalamu Alaikum wr-wb, perkenalkan nama saya ibu Rosnida zainab asal Kalimantan Timur, saya ingin mempublikasikan KISAH KESUKSESAN saya menjadi seorang PNS. saya ingin berbagi kesuksesan keseluruh pegawai honorer di instansi pemerintahan manapun, saya mengabdikan diri sebagai guru disebuah desa terpencil, dan disini daerah tempat saya mengajar hanya dialiri listrik tenaga surya, saya melakukan ini demi kepentingan anak murid saya yang ingin menggapai cita-cita, Sudah 9 tahun saya jadi tenaga honor belum diangkat jadi PNS Bahkan saya sudah 4 kali mengikuti ujian, dan membayar 70 jt namun hailnya nol uang pun tidak kembali, bahkan saya sempat putus asah, pada suatu hari sekolah tempat saya mengajar mendapat tamu istimewa dari salah seorang pejabat tinggi dari kantor BKN pusat karena saya sendiri mendapat penghargaan pengawai honorer teladan, disinilah awal perkenalan saya dengan beliau, dan secara kebetulan beliau menitipkan nomor hp pribadinya dan 3 bln kemudian saya pun coba menghubungi beliau dan beliau menyuruh saya mengirim berkas saya melalui email, Satu minggu kemudian saya sudah ada panggilan ke jakarta untuk ujian, alhamdulillah berkat bantuan beliau saya pun bisa lulus dan SK saya akhirnya bisa keluar,dan saya sangat berterimah kasih ke pada beliau dan sudah mau membantu saya, itu adalah kisah nyata dari saya, jika anda ingin seperti saya, anda bisa Hubungi Bpk Drs Tauhid SH Msi No Hp 0853-1144-2258. siapa tau beliau masih bisa membantu anda, Wassalamu Alaikum Wr Wr ..

    ReplyDelete