Cara Membuat Widget Tab View 3 Kolom Pada Blog - Artikel kali ini akan membahas tentang bagaimana cara membuat widget tab view menu 3 colom pada blogspot. Tehnik inidapat digunakan bagi sobat yang ingin menghemat tampilan halaman pada blognya. 3 kolom ini dapat sobat gunakan untuk memasukkan widget-widget yang lain kedalam satu kolom.



Berikut contoh gambar widget tersebut :

Cara Membuat Widget Tab View 3 Kolom Pada Blog

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">
    <div id="TabView" class="TabView">
    <div style="width: 400px;" class="Tabs">
    <a>Kategori</a>
    <a>Recent Comment</a>
    <a>Arsip</a>
    </div>
    <div style="width:378px; height:400px; " class="Pages">
    <div class="Page">
    <div class="Pad">

Daftar Isi Berdasarkan Kategori
<script style="java/script" src="http://scriptabufarhan.googlecode.com/svn/trunk/daftarisiv2.js"></script>
<script src="http://pelangibiru.net/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

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

Recent Comment
<script style="text/javascript" src="http://sites.google.com/site/anasku2000/comments.js"></script><script style="text/javascript">var numcomments = 10;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://pelangibiru.net/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

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

Arsip Blog
<script style="text/javascript" src="http://abu-farhan.com/script/daftarisibloggerarchive/tocbyarchivemin.js"></script>
<script src="http://pelangibiru.net/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>


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

Baca Juga Artikel Menarik Lainnya :

Komentar Pembaca :

Ada 1
Himadisi mengatakan...
pada hari 

Makasih gan..informasinya..tapi agan ngasih informasi tapi ga bisa di copy ya..gimana saya bisa menggunakannya..?

Posting Komentar


Pembaca yang baik selalu meninggalkan komentar yang bermutu. Komentar Spam atau kata-kata tidak sopan akan dihapus.

Next previous home