Cara Membuat Tabs di Blogspot

Cara membuat tabs di blogspot atau di blogger adalah hal yang sangat perlu di terapkan. karena hal ini akan memberikan daya tarik sendiri untuk penampilan blog kita, yang kelihatannya lebih simpel dan menarik untuk di lihat. nah tentunya akan menjadi daya pikat bagi pengunjung, agar pengunjung betah berlama-lamaan di blog kita. Seperti kebanyakan blog lain, dimana kita lihat di sidebar mau pun di fotter atau di header blog mereka banyak terdapat widget - widget, yang memungkin kan akan lama nya proses loading suatu blog tersebut. Nah untuk mengatasi terjadi nya kelamaan loading adalah dengan cara menambah Tabs. kita hanya cukup memerlukan satu widget untuk menempat kan isi content yang terdapat di widget-widget yang banyak tadi.

Nah untuk anda yang ingin blog nya kelihatan simple dan menarik untuk di lihat anda bisa menambahkan Aplikasi ini untuk blog anda. Berikut langkah-langkah cara menambah tabs ke dalam blog anda :

Langkah Pertama :

• Login ke blogger
• Klik Template >> Edit HTML
• Cari kode ]]></b:skin>
• Kemudian letakkan kode di bawah ini tepat di bawah ]]></b:skin>
  
  <!-- Tab Halaman Start -->
  <script type='text/javascript'>
  //<![CDATA[
  function tabtampil_oom(TPID, id)
  {
  var Tabtampil = document.getElementById(TPID);
  var TTs = Tabtampil.firstChild;
  while (TTs.className != "TTs" ) TTs = TTs.nextSibling;
  var TT = TTs.firstChild;
  var i = 0;
  do
  {
  if (TT.tagName == "A")
  {
  i++;
  TT.href = "javascript:tabtampil_ubah('"+TPID+"', "+i+");";
  TT.className = (i == id) ? "Active" : "";
  TT.blur();
  }
  }
  while (TT = TT.nextSibling);
  var Halamans = Tabtampil.firstChild;
  while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
  var Halaman = Halamans.firstChild;
  var i = 0;
  do
  {
  if (Halaman.className == 'Halaman')
  {
  i++;
  if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
  Halaman.style.overflow = "auto";
  Halaman.style.display = (i == id) ? 'block' : 'none';
  }
  }
  while (Halaman = Halaman.nextSibling);
  }
  function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id);
  }
  function tabtampil_inisial(TPID) { tabtampil_oom(TPID, 1);
  document.write('');}
  //]]>
  </script>
  <!-- Tab Halaman End -->
  
  
• Kemudian klik Simpan Tamplate

Langkah Kedua :

• Klik Tata Letak >> Tambahkan Gadget
• Pilih HTML/JavaScript
  
  
• Copy paste kode dibawah ini ke dalamnya
  
  <style type="text/css">
  div.TabTampil div.TTs
  {height: 24px; overflow: hidden; }
  div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
  { background-color: #eee; }
  div.TabTampil div.Halamans
  { clear: both; border: 1px solid #dcc9ba; overflow: hidden; background-color: #dcc9ba;}
  div.TabTampil div.Halamans div.Halaman
  { height: 100%; padding: 0px; overflow: hidden;}
  div.TabTampil div.Halamans div.Halaman div.Alas
  { padding: 3px 5px; }
  div.TabTampil div.TTs a
  { border-left:1px solid #eee; border-right:1px solid #eee; border-top:1px solid #eee; border-bottom:0px solid #eee; float: left;
  display: block; width: 120px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;
  font-size: 11px; font-weight: 900; color: #000000}
  </style>
  <form action="tabtampil.html" method="get">
  <div id="TabTampil" class="TabTampil">
  <div style="width: 480px;" class="TTs"> <a>Judul Tab 1</a> <a>Judul Tab 2</a> <a>Judul Tab 3</a></div>
  <div style="width: 480px; height: 300px;" class="Halamans">
  <div class="Halaman">
  <div class="Alas">
  <br/>
  
  Taruh content Tab 1 disini
  
  </div>
  </div>
  <div class="Halaman">
  <div class="Alas">
  <br/>
  
  Taruh content Tab 2 disini
  
  </div>
  </div>
  <div class="Halaman">
  <div class="Alas">
  <br/>
  
  Taruh content Tab 3 disini
  
  </div>
  </div>
  </div>
  </div>
  </form>
  <script type="text/javascript">tabtampil_inisial('TabTampil');</script>
  
  
• Untuk Tulisan berwarna merah letakkan kode konten yang ingin Anda tampilkan
• Kemudian simpan dan lihat hasilnya

Silahkan Anda berkreasi mengganti besar kecilnya tampilan tab serta warna yang pasti menyesuaikan dengan warna default blog Anda. Pengaturannya ada di style CSS kode script diatas.

Semoga Bermanfaat