Membuat Tab View / Multi Tab di Blog

Bagi kamu yang mempunyai pertanyaan 'bagaimana cara menyatukan 3 widget atau lebih menjadi satu?' disini Andi Techno akan membahas cara membuatnya, sebenarnya namanya adalah Tab View, dengan membuat tab view kita dapat menghemat banyak ruang pada sidebar kita karena beberapa widget dapat kita satukan pada tab view, buat kamu yang masih bingung apa dan bagaimana itu Tab View silahkan lihat contohnya: Klik Disini nah lihat disana saya menyatukan widget 'recent post' 'entri populer' dan juga 'label' menjadi satu. Oke, langsung aja yuk sob belajar cara membuat tab view / multi tab di blog.

1. Masuk ke Dashboard blogger (saat artikel ini dibuat saya masih menggunakan tampilan blogger lama / lawas) , klik rancangan, klik edit HTML.
2. Cari kode ]]></b:skin> dengan bantuan CTRL+F, kemudian letakkan / copas kode berikut dibawah kode ]]></b:skin> tadi

div.TabView div.Tabs{height: 24px;overflow: hidden;}div.TabView div.Tabs a{float: left;display: block;width: 84px; text-align: center;height: 24px; 
padding-top: 3px;vertical-align: middle;border: 1px solid #999999; 
border-bottom-width: 0;text-decoration: none;font-family: "Times New Roman", Serif; 
font-weight: 900;color: #1E62B6; 
}div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{background-color: #FFFFFF;
}div.TabView div.Pages{clear: both;border: 1px solid #999999;
overflow: hidden;background-color: #FFFFFF; }div.TabView div.Pages div.Page{height: 100%;padding: 0px;overflow: hidden;}div.TabView div.Pages div.Page div.Pad{padding: 3px 5px;}

keterangan, kamu bisa mengatur desainnya dengan memperhatikan kode berikut:
- 84 untuk mengatur lebar menu utama atas
- 24 untuk mengatur tinggi menu utama atas
- 999999 adalah kode warna border pada menu atas
- 1E62B6 adalah kode warna font menu utama atas
- FFFFFF adalah kode warna background menu utama atas
- 999999 adalah kode warna border kotak utama
- FFFFFF adalah kode warna background kotak utama


3. cari kode </head>, lalu letakkan kode berikut ini sebelum kode </head> tadi

<script type='text/javascript'>function tabview_aux(TabViewId, id){var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;var i = 0;
do{if (Tab.tagName == &quot;A&quot;){i++;Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;Tab.blur();}}while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;
var Page = Pages.firstChild;var i = 0;
do{if (Page.className == &#39;Page&#39;){i++;if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;Page.style.overflow = &quot;auto&quot;;Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;}}while (Page = Page.nextSibling);}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }</script>

4. Klik simpan template, lalu kembali ke page element / edit tata letak, klik add gadget atau tambah gadget lalu pilih HTML / Javascript, kemudian masukkan kode berikut didalamnya:

<form action="tabview.html" method="get"><div class="TabView" id="TabView"><div class="Tabs" style="width: 230px;"><a>Menu 1</a><a>Menu 2</a><a>Menu 3</a></div><div class="Pages" style="width: 240px; height: 265px;">
<div class="Page"><div class="Pad">Menu 1.1 <br />Menu 1.2 <br />Menu 1.3 <br /></div></div>
<div class="Page"><div class="Pad">Menu 2.1 <br />Menu 2.2 <br />Menu 2.3 <br /></div></div>
<div class="Page"><div class="Pad">Menu 3.1 <br />Menu 3.2 <br />Menu 3.3 <br /></div></div>
</div></div></form>
<script type="text/javascript">tabview_initialize('TabView');</script>

Keterangan:
- kode berwarna hijau untuk mengatur tinggi dan lebar tab view
- kode berwarna orange ganti dengan judul tabview (contoh: recent, arsip, label)
- kode berwarna biru ganti dengan widget yang mau diisi di tabview (contoh: gambar, link blogroll, script, dll)

5. Klik simpan lalu lihat hasilnya
baca juga artikel berikut: Membuat Judul Artikel dengan Efek Glow Keren

keyword: cara membuat tab view di blog, membuat multi tab di blog, membuat kolom tab di blog, membuat tab menu di blog, membuat tab di blog, menyatukan beberapa widget menjadi satu, trik menghemat ruang di blog