SAS - Suminah

Hari ini satriacell.com kembali lagi dengan posting tentang tutorial tips dan trick blogger, hari ini saya memutuskan kembali memasang tab view menu seperti bisa anda lihat pada sidebar bagian atas atau seperti gambar di bawah ini.

Mengingat semakin banyaknya widget yang harus saya pasang di blog ini, makanya saya memutuskan untuk memasangnya kembali setelah lama saya lepas. Karena menurut saya selain dapat menghemat banyak ruang untuk penempatan widget pada sidebar, ini juga salah satu langkah atau cara kustomisasi blog biar gak bosan dengan tampilan yang begitu-begitu aja.

Ok langsung saja cara pembuatannya ikuti langkah-langkah di bawah ini

• Silahkan login ke blogger dengan ID sobat tentunya.
• Tuju Rancangan.
• Klik Edit HTML.
• Jangan lupa backup template sobat terlebih dahulu dengan mengklik Download Template Lengkap.
• Kemudian letakkan kode javascript berikut sebelum kode </head>

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

• Setelah itu letakkan kode berikut di atas kode ]]></b:skin>

div.TabView div.Tabs { height: 30px; overflow: hidden; } div.TabView div.Tabs a { float: left; display: block; width: 98px; /* Lebar Menu Utama Atas */ text-align: center; height: 30px; /* Tinggi Menu Utama Atas */ padding-top: 3px; vertical-align: middle; border: 1px solid #BDBDBD; /* Warna border Menu Atas */ border-bottom-width: 0; text-decoration: none; font-family: "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: #E6E6E6; /* Warna background Menu Utama Atas */ } div.TabView div.Pages { clear: both; border: 1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow: hidden; background-color: #E6E6E6; /* 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: 3px 5px; }

• Kemudian Simpan Template.
• Langkah selanjutnya, silahkan sobat klik Rancangan.
• Klik Elemen Halaman dan tambahkan Gadget.
• Pilih yang HTML / Javascript, dan tambahkan kode berikut kedalamnya

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a href="http://draft.blogger.com/post-create.g?blogID=5620196058393799054">Tab 1</a>
<a href="http://draft.blogger.com/post-create.g?blogID=5620196058393799054">Tab 2</a>
<a href="http://draft.blogger.com/post-create.g?blogID=5620196058393799054">Tab 3</a></div>
<div class="Pages" style="height: 250px; width: 300px;">

<div class="Page">
<div class="Pad">
<span style="color: blue;">Widget disini tab1</span></div>
</div>
<div style="color: blue;">

</div>
<div class="Page">
<div class="Pad">
<span style="color: blue;">Widget disini tab2</span></div>
</div>

<div class="Page" style="color: blue;">
<div class="Pad">
Widget disinitab3</div>
</div>

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

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

Simpan Dan lihat hasilnya semoga berhasil