Membuat Tab View Pada Blog

Bagaimana cara membuat tab view seperti yang tampak tampilanya di sidebar kanan blog ini? Nah Kalau kalian ingin tahu caranya, saya akan mencoba memberi tahu langkah-langkahnya di bawah ini.

Pertama-tama pastikan bahwa kalian telah "Login" pada blog yang kalian miliki kemudian masuklah ke bagian "Tata Letak" dan Pilih "Edit HTML". Sampai di sini, lagi-lagi kalian harus mencari kode yang berwarna merah ini ]]></b:skin> dan untuk mempermudah pencarian gunakan Ctrl-F pada keyboard. Kalau kalian sudah sering membaca postinga-postingan saya sebelumnya, tentunya kalian sudah tahu persis di mana kode tersebut berada. Lanjut..., setelah kalian temukan kode di atas, silahkan kalian letakkan (copy-paste) kode Css tepat di atas kode yang berwana merah tadi dan script tepat di bawah kode yang berwarana merah tersebut.

Kode Css

.TabView .Tabs {
  height: 24px;
  overflow: hidden;
  }
.TabView .Tabs a {
  float: left;
  display: block;
  width: 98px; /* lebar kolom judul tab view */
  text-align: center;
  height: 24px; /*tinggi kolom judul tab view*/
  padding-top: 3px;
  vertical-align: middle;
  border-bottom-width: 0;
  text-decoration: none;
  font-family: "Times New Roman", Serif; 
  font-weight: 900;
  color: #7c7c7c; 
  background-color:#dde4ea;
  border:1px solid #ccc;
  }
.TabView .Tabs a:hover {
  background-color: #cecece; 
  } 
.TabView .Tabs a.Active {
  background-color: #fff;
  color:#333; 
  }
.TabView .Tabs a:hover {
  background-color: #cecece; 
  } 
.TabView .Pages {
  width: 298px;  /*lebar halaman tab view*/
  height: 438px; /*tinggi halaman tab view*/
  clear: both;
  overflow: hidden;
  background-color: #fff; 
  border-left:1px solid #ccc;
  border-right:1px solid #ccc;
  border-bottom:1px solid #ccc;
  }
.TabView .Pages .Page {
  height: 100%;
  padding: 0 0 0;
  overflow: hidden;
  }
.TabView .Pages .Page .Pad {
  padding: 10px 5px;
  }
.TabView .Pages .Page .Pad a,
.TabView .Pages .Page .Pad a:visited,
.TabView .Pages .Page .Pad a:hover {color:#FBB917;}

Script

<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id){
  var TabView = document.getElementById(TabViewId);
  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);
  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);
}
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
//]]>
</script>

Setelah kalian masukkan kode Css dan Script di atas pada posisinya masing-masing, simpan template kalian dan beralihlah ke bagian "Elemen Halaman" dan masukkan kode widget di bawah ini pada kolom sidebar template kalian. Untuk penjelasan ini kalian bisa baca di sini.

Kode Widget

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">

<div class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
</div>

<div class="Pages">

<div class="Page">
<div class="Pad">
Terima Kasih Atas Kunjungannya
Silahkan kalian masukkan tulisan, gambar, atau kode widget kalian di sini !
</div>
</div>

<div class="Page">
<div class="Pad">
Terima Kasih Atas Kunjungannya
Silahkan kalian masukkan tulisan, gambar, atau kode widget kalian di sini !
</div>
</div>

<div class="Page">
<div class="Pad">
Terima Kasih Atas Kunjungannya
Silahkan kalian masukkan tulisan, gambar, atau kode widget kalian di sini !
</div>
</div>

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

Setelah kalian masukkan kode widget di atas, simpan dan lihat blog kalian. Nah sampai di sini pekerjaan saya selesai dan kalian harus meneruskan pekerjaan sendiri untuk menyesuaikan kembali ukuran tab view dengan ukuran sidebar pada blog yang kalian miliki. Silahkan kalian edit kembali kode css-nya untuk menyesuaikan ukuran tab view pada kolom sidebar yang kalian miliki. Selamat bekerja...!