Home » » Cara Membuat Widget 3 Kolom

Cara Membuat Widget 3 Kolom

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 ini dapat 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.
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 dibawah ini lalu ganti URLnya dengan blog sobat: 
<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> 
Sumber : Net

Ditulis Oleh : kabar kalianda ~ Blogger Kalianda

Sobat sedang membaca artikel tentang Cara Membuat Widget 3 Kolom. Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, dan jangan lupa untuk follow dan meninggalkan komentar sobat.

:: Cara Membuat Permalink disini ::

Share this article :
Comments
1 Comments

1 comments:

  1. maksih ... motekar telah memakai posting anda dan juga memosting nya denganbeberapa perubahan. oK!

    ReplyDelete

Terima kasih atas kunjungannya, jangan lupa tinggalkan komentar dan Follownya untuk perkembangan blog ini. No Approval No Captcha. Langsung Muncul. Happy Blogging ^_^

Masukan URLPanjang Sobat:
 
Author : Kabar Kalianda | Sitemap | Feeds
Copyright © 2013. Blogger Indonesia - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger