Cara Membuat Multy Tab View Di Sidebar

Multy Tab View - Biasanya di sidebar cuma ada satu tab saja, disini kita akan membuat Multy Tab di sidebar. Fungsi utamanya adalah untuk menghemat ruang web/blog anda, sangat efisien bagi para blogger juka ruangan sudah sempit atau bingung untuk menambah widget lainya. silahkan anda buat untuk menghemar ruang blog/web anda. Berikut langkah langkah pembuatan Multy Tab View.

Alur Pembuatan Multy Tab View

1. Seperti kemarin masuk akun Blogger

2. Pilih Rancangan/Design

3. Pilih EditHTML lalu centang " Expand Widget Templates "

4. Cari code  </head>  Untuk memudahkan pencarian tekan CTRL + F

5. Copy Script dibawah ini lau letakan diatas code </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>

6. Selanjutnya cari code  ]]></b:skin>  , Copy script dibawah ini dan letakan diatas code ]]></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;
}

7. Lalu Save
8. Selanjutnya Masuk ke Rancangan/Design >> Elemen laman/Add Page Elemen >> Tambah Gadget >> HTML/JavaScript
9. Copy script dibawah ini dan letakan didalamnya

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">

<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>

</div>
<div class="Pages" style="width: 300px; height: 300px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

10. S A V E

Keterngan :

Warna Merah : Untuk mengganti ukuran (Lebar dan tingginya) atur dan sesuaikan dengan ukuran sidebar anda.

Warna Orange : Ganti dengan judul widget anda

Warna Pink : Content/Isi dari sub menu, anda bisa mengisinya dengan link atau stat blog atau yang lainya

Ikuti dengan teliti yang anda butuhkan adalah ketelitian dan kesabaran, Jika ada yang kurang jelas silahkan anda tanyakan. Selamat mencoba dan semoga sukses !

Terima Kasih