Membuat Tab View Sederhana Di Sidebar

Tab view bagi saya merupakan tab yang sangat berguna untuk meminimalisir jumlah gadget di sidebar blog kita, sebagai contoh, bila anda mempunyai beberapa gadget yang penting tetapi bila sendainya anda pasang di semua tempat di sidebar anda, tentunya akan membuat panjang sidebar blog anda, maka dari itu tab view ini sangat berguna. Untuk membuat script yang ada utk menjadikan beberapa tab dalam satu gadget di sidebar anda, jadi intinya anda dapat menghemat ruangan pada blog anda sehingga blog andapun jadi tampak lebih rapi. Bagaimana cara membuat Menu Tab View di Blog anda, tanpa harus merubah atau mengutak-atik HTML template blog yang bisa berisiko merusak blog kita apabila tidak berhati2 dalam mengedit. Ada cara yang lebih aman, namun cara ini membuat anda harus rajin - rajin update memasukan links posting ke dalam script, karena masih dengan cara manual.

Contoh Tampilan Menu Tab View seperti diatas :

Bila anda tertarik membuatnya, berikut langkah-langkah yang dapat anda lakukan dalam membuat tab viewnya, Langsung aja. Caranya  seperti biasa,  Login ke blogger. Kemudian Pilih Rancangan/Design >> Element Laman >> setelah itu anda Tambah/add gadget lalu pilih Html/Javascript, Nah tinggal copy paste script di bawah ini ke dalamnya :

<style type="text/css">
    div.TabView div.Tabs
    {height: 30px;overflow: hidden}
    div.TabView div.Tabs a {float:left; display:block; width: 198px; /* 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: "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: 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: 600px;" class="Tabs">
    <a>Tips Blog</a>
    <a>Renungan</a>
    <a>Tips Kesehatan</a>
    </div>
    <div style="width:600px; height:250px; " class="Pages">
    <div class="Page">
    <div class="Pad">
<li><a href="http://showgan.blogspot.com/2011/08/6-alasan-pengunjung-membenci-blog-anda.html">6 Alasan Pengunjung Membenci Blog Anda</a></li>
    </div>    </div>
    <div class="Page">
    <div class="Pad">
<li><a href="http://showgan.blogspot.com/2011/08/filosofi-pohon.html">Filosofi Pohon</a></li>
    </div>    </div>
    <div class="Page">
    <div class="Pad">
<li><a href="http://showgan.blogspot.com/2011/08/info-pengobatan-untuk-asam-urat.html">Info Pengobatan untuk Asam Urat</a></li>
    </div>    </div>
    </div>
    </div>
    </form>
    <script type="text/javascript">
    tabview_initialize('TabView');
</script>

Sebelum disimpan, ganti dulu url dan huruf berwarna  MERAH sesuaikan dengan links posting blog anda. Saya rasa sekian, Selamat mencoba dan semoga bermanfaat. Jangan lupa tinggalkan pesan bila artikel ini bermanfaat untuk anda yah :)