Cara membuat Tab menu vertikal

• Cara Membuat Tab View Menu Blog di Blogspot.

  

  Contoh Tab View Menu (Template Lama AB nih)

  Kode script Cara Membuat Tab View Menu Blog di Blogspot sangat banyak sekali. Diperlukan kehati-hatian dan kesabaran ketika kita ingin Membuat Tab View Menu Blog di Blogspot. Jadi, setelah anda yakin ingin Membuat Tab View Menu Blog di Blogspot, sebaiknya Simpan dahulu template blog anda untuk menjaga-jaga saja.
  
  Beginilah ceritanya bagaimana Cara Membuat Tab View Menu Blog di Blogspot:
  1. Seperti biasa Anda harus membuka Akun Blogger anda.
  2. Pilih Rancangan / design Tata Letak.
  3. Selanjutnya pilih Edit HTML.
  4. Pesan AB : Jangan lupa backup template anda terlebih dahulu dengan mengklik Download Template Lengkap)
  5. Centang Expand Template Widget
  6. Carilah kode </head> (gunakahn CTRL + F untuk memudahkan pencarian), setelah ketemu lalu Copy-lah kode javascript dibawah ini dan paste-kanlah tepat sebelum kode </head> 
  <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>
  
  7. Setelah langkah diatas selesai, selanjutnya carilah kode seperti : ]]></b:skin> Lalu, Copy-lah kode script di bawah ini, dan pastekan tepat berada di atas kode ]]></b:skin>
  div.TabView div.Tabs
  {
  height: 30px;
  overflow: hidden;
  }
  div.TabView div.Tabs a
  {
  float: left;
  display: block;
  width: 98px; /* Lebar Menu Utama Atas */
  text-align: center;
  height: 30px; /* Tinggi Menu Utama Atas */
  padding-top: 3px;
  vertical-align: middle;
  border: 1px solid #BDBDBD; /* Warna border Menu Atas */
  border-bottom-width: 0;
  text-decoration: none;
  font-family: "Verdana", 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: #E6E6E6; /* Warna background Menu Utama Atas */
  }
  div.TabView div.Pages
  {
  clear: both;
  border: 1px solid #BDBDBD; /* 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: 3px 5px;
  }
  
  8. Simpanlah Template Blog anda.
  9. Beralih / pilih Rancangan
  10. Tambahkan Widget / Gadget
  11. Pilih yang HTML / Javascript,
  12. Copylah kode script di bawah ini dan pastekan ke dalam widget/gadget baru tadi.
  <form action="tabview.html" method="get">
  <div class="TabView" id="TabView">
  <div class="Tabs" style="width: 300px;">
  <a>Menu 1</a>
  <a>Menu 2</a>
  <a>Menu 3</a>
  </div>
  <div class="Pages" style="width: 300px; height: 250px;">
  <div class="Page">
  <div class="Pad">
  Menu 1.1 <br />
  Menu 1.2 <br />
  Menu 1.3 <br /> </div>
  </div>
  <div class="Page">
  <div class="Pad">
  Menu 2.1 <br />
  Menu 2.2 <br />
  Menu 2.3 <br />
  </div>
  </div>
  <div class="Page">
  <div class="Pad">
  Menu 3.1 <br />
  Menu 3.2 <br />
  Menu 3.3 <br /> </div>
  </div>
  </div>
  </div>
  </form>
  <script type="text/javascript">
  tabview_initialize('TabView');
  </script>
  
  13. Aturlah sedemikian Rupa
  14. Setelah anda selesai mengedit widget di atas, Simpanlah.
  15. Simpan Template anda dan lihat hasilnya.
  
  Catatan :
  • Silahkan anda ganti kode-kode yang di warnai biru denga ukuran sesuai keinginan anda.
  • Silahkan anda ganti kode-kode yang di warnai merah dengan warna sesuai keinginan anda
  • Untuk warna Orange, tulisan Menu1, Menu 2, Menu 3, gantilah sesuai keinginan anda. (Contoh : lihat gambar di atas, Blogger, Tips-Trik, Adsense itu Menu pada Tab yang AB buat).
  • Untuk Menu 1.1, Menu 1.2, Menu 1.3 silahkan masukkan kode script yang anda inginkan, apabila script cuma satu saja, hapus saja Menu 1.2 dan 1.3. Ingat isinya sesuaikan dengan Menu 1.
  • Untuk Menu 2.1 sampai 2.3 dan Menu 3.1 sampai 3.3 langkahnya hampir sama dengan Menu 1.1. Ingat isinya sesuaikan dengan Menunya ok.
  • Gambar di atas hanya contoh saja, jangan jadikan patokan. Silahkan Anda masukkan Gambar atau Iklan atau kode-kode widget yang menurut anda bagus dan cantik.