Membuat 3 Kolom Widget Pada Sidebar Blog

Selamat siang, dalam membuat blogger pasti selalu ingin menampilkan apa-apa yang menarik dalam blogger tersebut ya misalnya saja anda ingin menampilkan Populer Post, Related Post, atau mungkin Related Comments agar memudahkan pengunjung dan juga anda dalam memantau blogger anda sudah banyak sekali cara membuat 3 kolom widget pada sidebar blog pada pencarian google namun saya lebih tertarik dengan model 3 kolom yang dibuat oleh sdr Zen Huzaini. Dengan model tampilan yang simple dan smooth juga jadi saya praktekan dalam blog ini.

Ohya berhubung anda sedang berkunjung di blog ini tentunya saya akan sajikan cara bagaimana menggunakan 3 kolom widget pada sidebar blog ini.

Pertama anda masuk dashboard blogger anda

Kemudian pilih menu tata letak disamping bawah ada dekat dengan opstion tema

Lalu anda klik pada bagian sidebar(kiri/kanan) – Add Widget – Javascript/HTML

Lalu masukan kode dibawah ini

 <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">

Deskripsi Tab 1
(Bisa memasukan script/teks biasa)

<div style="font-size: 10px; float: right;">Dapatkan comment widget ini di <a href="http://yuktebarilmu.blogspot.com">sini</a></div>
<style type="text/css">
    </div>
    </div>
    <div class="Page">
    <div class="Pad">

Deskripsi Tab 2
(Bisa memasukan script/teks biasa)

<div style="font-size: 10px; float: right;">Dapatkan comment widget ini di <a href="http://yuktebarilmu.blogspot.com">sini</a></div>
<style type="text/css">
    </div>
    </div>
    <div class="Page">
    <div class="Pad">


Deskripsi Tab 3
(Bisa memasukan script/teks biasa)

<div style="font-size: 10px; float: right;">Dapatkan comment widget ini di <a href="http://yuktebarilmu.blogspot.com">sini</a></div>
<style type="text/css">
    </div>
    </div>
    </div>
    </div>
    </form>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script> 

Jika sudah, sebelum anda terbitkan tentunya anda perlu mengedit dan memasukan beberapa script untuk sebuah hal yang anda inginkan misal anda ingin memasukan Related Comments pada salah satu tab tersebut maka anda harus mencari script Related Comments di google atau lainnya. Dan anda juga bisa mengedit beberapa hal yang sekiranya anda kurang suka.

Cukup mudah dan simple bukan?

Untuk melihat contoh anda bisa lihat di sidebar blog ini ya.

Terima kasih anda telah membaca artikel Membuat 3 Kolom Widget Pada Sidebar Blog. Jika anda kurang paham silahkan berkomentar dibawah & Ada baiknya jika artikel ini bermanfaat Share ke saudara atau teman anda.

Related Posts: