Membuat New Tab Pada Blogspot

Sebenarnya trik ini sudah lama dan sudah banyak dibahas di blog lain, tapi saya coba untuk menginformasikan di sini dengan cara Ariawijaya.com 

untuk melengkapi trik-trik Blogspot sebelumnya yaitu Read More, Related Articles, Recent Post, Recent Comment, Mengganti Favicon, dan menyembunyikan Navbar.

Fungsi tab disini sebenernya lebih untuk mengefisiensikan tempat dalam tampilan blog di Blogspot, karena dengan fungsi tab ini kita bisa menggabungkan beberapa konten dalam blog kita. Masing-masing tab bisa kita isi dengan konten yang berbeda-beda, yang tentunya dalam satu tab, berisi tentang beberapa konten yang dijadikan salam satu kelompok (satu tab), misalnya Tab 1 berisi kategori isi, Tab 2 berisi link atau blogroll, dan seterusnya. Jumlah Tab ini pun sebenarnya tidak terbatas, hanya saja kita tetap harus memperhatikan bidang yang kita miliki.

Dalam contoh berikut saya akan membuat Tab yang berisi 3 konten utama dengan lebar 450 pixel (sesuai space pada sidebar). Untuk memulainya, kita masuk ke Control Panel Blogspot, kemudian masuk tab Layout. Di sini kita masuk ke Edit Html, jangan lupa untuk mencentang Expand Widget Template, untuk memunculkan seluruh script yang ada.

Sekarang kita cari kode ]]>, untuk memudahkan gunakan fungsi search browser (Ctrl+F). Setelah ketemu masukan script pertama dibawah ini di atas kode ]]>.

/* tabview css start */

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 100px; /* Lebar menu utama */
text-align: center;
height: 24px; /* Tinggi menu utama */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border menu utama */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font menu utama */
font-weight: 900;
color: #000; /* Warna font menu utama */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #F3F53A; /* Warna background menu utama */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border isi konten */
overflow: hidden;
background-color: #9BA9FE; /* Warna background isi konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

/* tabview css end */

Kemudian masukkan script kedua berikut di bawah kode ]]>. Setelah selesai Simpan template tersebut.

Sampai di sini trik pemasangan Tab sudah selesai, bisa dilihat tampilan pada blog.

Untuk lebih jelasnya, berikut saya akan menunjukkan cara penggunaan tab tersebut. Pertama kita masuk dan mengedit Gadget yang tadi kita pasang script Tab. Sebagai contoh disini, saya isi Tab 1 dengan Category, yang berisi kategori artikel berdasarkan label pada artikel saya, sedangkan Tab 2 saya gunakan sebagai konten Links yang berisi link blogroll.

Setelah diupdate maka hasilnya dalam tampilan blog adalah sebagai berikut.

Selesai, semoga trik ini bermanfaat. Selamat mencoba.

Penting:

Perlu dijelaskan di sini, bahwa script kedua di atas (tabvieww.js) adalah javascript yang disimpan di server lain, untuk script di sini disimpan di superinhost.com, jadi jika satu saat script ini dihapus dari server atau server yang bersangkutan down dan tidak bisa diakses, maka otomatis fungsi tab yang kita buat tidak akan berfungsi lagi, karena script yang seharusnya dijalankan dari server tersebut tidak dapat diakses. Adapun isi javascript tersebut adalah sebagai berikut (tabview.js).

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); }