Membuat Tab View Sederhana Di Sidebar

Tab view bagi saya merupakan tab yang sangat berguna untuk menimalisir jumlah gadget di sidebar blog anda, sebagai contoh, bila anda mempunyai beberapa gadget yang penting tetapi bila sendainya anda pasang ke semuanya di sidebar anda, tentunya akan membuat panjang anda, maka dari itu tab view ini sangat berfungsi untuk membuat beberapa script yang ada menjadi beberapa tab dalam satu gadget di sidebar anda, jadi intinya anda dapat menhemat ruangan pada blog anda sehingga blog andapun jadi tampak lebih rapi.

Berikut demo hasilnya;

Bila anda tertarik membuatnya, berikut langkah-langkah yang dapat anda lakukan dalam membuat tab viewnya:

1. Masuk ke akun Blogger Anda.
2. Klik Tata Letak.
3. Klik Tambah Gadget.
4. Pilih HTML/JavaScript.
5. Lalu copy script berikut

Tab View Sederhana:

style type="text/css">
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:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Comic sans ms", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#232323; /* 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: #085baa; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:f1f5fa; /*

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>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">

Data Tab 1

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

Data Tab 2


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

Data Tab 3

</div>
</div>





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

Keterangan:

Bila hasilnya kurang memuaskan anda dapat mengganti kode tampilan berikut sesuai dengan yang anda inginkan:

1. Kode 085baa merupakan kode warna hover dan kotak utamanya 
2. Kode BDBDBD merupakan kode border
3. Kode 232323 merupakan kode warna tulisan
4. Comic sans ms merupakan jenis font
5. Judul tab, dapat anda gunakan sesuai keperluan anda
6. Isi tab dapat isi dengan script yang anda perlukan juga.

Saya rasa sekian, Selamat mencoba dan semoga bermanfaat.

Jangan lupa tinggalkan pesan bila artikel ini bermanfaat bagimu yah,,, 

hehe. . .

Posted in: Tips Blogging