Cara Membuat Widget Tab View 3 Kolom Pada Blog

Sebenarnya sudah banyak tutorial cara membuat Widget Tab View 3 Kolom Pada Blog,,,, tapi saya hanya melanjutkan dari request dari sahabat blog yang menanyakan cara membuat Widget Tab View 3 Kolom Pada Blog,,senang rasanya apabila tutorial ini bisa membantu.
cara ini dapat digunakan bagi sahabat blog yang ingin menghemat tampilan halaman pada blognya. 3 kolom ini dapat sobat gunakan untuk memasukkan widget-widget yang lain kedalam satu kolom. lihat contoh di blog saya....


Selanjutnya, untuk membuat widget ini akan menggunakan kode CSS buatan Abu Farhan.

Berikut langkahnya :

    * Login ke akun blogger sobat

    * Pilih rancangan, Elemen halaman dan tambah wiget. Pilih Html

    * Masukkan kode berikut

<style type="text/css">

    div.TabView div.Tabs

    {height: 30px;overflow: hidden}

    div.TabView div.Tabs a {float:left; display:block; width: 124px; /* 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: "Courier", 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: #FFFFFF; /* Warna background Menu Utama Atas */ }

    div.TabView div.Pages {clear:both; border:1px solid #0099CC; /* 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">

Cara menggunakannya:

* Ganti tulisan warna merah untuk mengatur tampilan kolom wiget
* Ganti tulisan warna merah muda dengan Script kode yang ingin sobat masukan kedalam tiap-tiap bagian kolom ( bisa kode scrip apa saja ex. buku tamu, gambar, dsb), atau jika sobat ingin tetap seperti format diatas ganti warna orange dengan alamat blog sobat.

 Dibawah ini adalah contoh dari punya saya...

<style type="text/css">
    div.TabView div.Tabs
    {height: 30px;overflow: hidden}
    div.TabView div.Tabs a {float:left; display:block; width: 81.2px; /* Lebar Menu Utama Atas */
    text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
    padding-top:8px; vertical-align:middle; border:1px solid #A52A2A; /* Warna border Menu Atas */
    border-bottom-width:1; text-decoration: none; font-family: "georgia", Serif;   /* Font Menu Utama Atas */
    font-weight:bold; color:#fffff; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:1px; -moz-border-radius-topright:1px}
    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:0px solid #A52A2A; /* Warna border Kotak Utama */ overflow:hidden; background-color:ttansfarent; /* Warna background Kotak Utama */ }
    div.TabView div.Pages div.Page {height:60%; 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: 260px;" class="Tabs">
    <a>Sekilas</a>
    <a>ShoutMix</a>
    <a>Isi Blog</a>
    </div>
    <div style="width:246,05px; height:330px; " class="Pages">
    <div class="Page">
    <div class="Pad">



Daftar Isi Berdasarkan Kategori
<script type="text/javascript" src="http://www.bux4ad.com/affiliate/scripts/banner.php?a_aid=359af28c&a_bid=4941f9d9"></script>
<script style="java/script" src="http://abu-farhan.com/svn/trunk/daftarisiv2.js"></script>
<script src="http://www.blusion.co.cc/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

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


   <center><!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="blusion" src="http://www1.shoutmix.com/?blusion" width="235" frameborder="0" height="310" scrolling="auto">&amp;amp;amp;lt;br&amp;amp;amp;gt;&amp;amp;amp;lt;a href="http://www1.shoutmix.com/?blusion"&amp;amp;amp;gt;View shoutbox&amp;amp;amp;lt;/a&amp;amp;amp;gt;&amp;amp;amp;lt;br&amp;amp;amp;gt;</iframe>

<a href="http://www.shoutmix.com/" title="Get your own free shoutbox chat widget at ShoutMix!"></a>

<!-- End ShoutMix --><center>


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


<script style="text/javascript" src="http://abu-farhan.com/script/daftarisibloggerarchive/tocbyarchivemin.js"></script>
<script src="http://www.blusion.co.cc/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>


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