Menambah 3 Kolom Widget Di Sidebar Blog

Pernahkah anda melihat blog yang memiliki 3 kolom widget ? pasti pernah, karena jika tidak pasti anda tidak akan nyasar ke blog ini :D . Setelah membahas bagaimana caranya memasukkan meta description dan keyword pada blog yang sangat penting untuk SEO dari sebuah blog, kali ini saya ingin memberi tips untuk Menambah 3 Kolom Widget Di Sidebar Blog.

Sebenarnya cara ini digunakan untuk meringkas widget-widget yang kelihatan menggangu dan tidak enak dilihat yang berada di sidebar. Hal ini terkadang luput dari pandangan kita bahwa sebenarnya mungkin saja para visitor merasa risih dengan widget-widget yang panjang dan didak teratur.

Untuk Membuat 3 kolom widget di sidebar blog sebenarnya sangat mudah dan saya sudah mempraktikannya. cara yang saya akan share ini sangat mudah untuk blogger pemula. Yaitu membuat 3 kolom widget tanpa harus mengedit template.

Mari kita simak..

<style type="text/css">
    div.TabView div.Tabs
    {height: 50px;overflow: hidden}
    div.TabView div.Tabs a {float:left; display:block; width: 95px; /* 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: 300px;" class="Tabs">
    <a>Kategori</a>
    <a>Recent Comment</a>
    <a>Arsip</a>
    </div>
    <div style="width:300px; height:250px; " class="Pages">
    <div class="Page">
    <div class="Pad">

Menu
script anda

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

Menu1

script anda

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


Menu2

script anda

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

Panduan :

Warna Merah : Anda sesuaikan dengan keinginan dan besar template yang dipakai.

Warna Biru Muda : Ini merupakan judu lmenu pada setiap tab, ubah sesuai kebutuhan

Warba Biru Tua : Sebenarnya bisa dihapus dan tidak usah dipakai, karena ini hanya sebagai deskripsi dari setiap tab. Misal pada tab pertama berjudul Recent Comment, nanti pada saat di klik akan muncul dibawahnya keterangan yang bisa anda ubah.

Untuk script yang bertuliskan Script Anda, isilah dengan script yang anda inginkan misalnya

Widget Comment Blog

Anda bisa mengubahnya sesuai dengan yang anda inginkan sesuai dengan ketentuan panduan yang sudah saya tuliskan di atas.

Mudah bukan ? Jangan lupa selain harus mempercantik tampilan blog dengan membuat menu Tab view 3 Kolom Seo Friendly di blog , satu aspek yang tidak boleh dilupakan yaitu memperhatikan kualitas artikel yang akan dibuat karena sangat berdampak pada SEO dan SERP anda

Baca Juga : Tips untuk blogger pemula

Share this

Author : zenhuzaini

Related Posts