Menu Tab View Tanpa Edit HTML 2

Selamat Bertemu Kembali!!! Postingan ini adalah update dari postingan saya sebelumnya. Postingan ini saya buat karena style menu tab view sebelumnya, terkesang sangat sederhana dan itu-itu saja. Jadi, saya membuat dua style baru yang. Langkahnya sudah tau kan? Kalau belum, gampang kok. tidak terlalu susah. Oke, kita mulai saja.

Pertama, silahkan login ke akun Anda. Klik RANCANGAN kemudian klik TAMBAHKAN GADGET, pada halaman ELEMEN LAMAN. Kalau sudah terbuka tab baru, copy kode di berikut ke dalamnya.

• Copy kode berikut untuk Menu Tab View dengan border yang melengkung.
  
  
  

  <style type="text/css">
  #badan {width: 355px;margin: 3px;padding: 5px;background: url(https://lh5.googleusercontent.com/_QeIxO28ukBc/Tb_dEgDHi7I/AAAAAAAAAeU/qs2r9pSkI1s/buku4.png);overflow: hidden; -moz-box-shadow: 2 4 4 #cccccc;
  -webkit-box-shadow: 2 4 4 #cccccc;
  -goog-ms-box-shadow: 2 4 4 #cccccc;
  box-shadow: 2 4 4 #cccccc;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -goog-ms-border-radius: 10px;
  border-radius: 10px;}
  div.TabView div.Tabs
  {height: 30px;overflow: hidden;}
  div.TabView div.Tabs a {float:left; font-size: 11px; display:block; width: 65px; /* lebar menu atas */
  text-align:center ; height: 18px; /* tinggi menu atas */
  padding-top:6px; padding-left: 2px; padding-right: 2px; border:1px inset #fff290; /* border menu atas */
  text-decoration: none; font-family: "tahoma", Serif; /* Font Menu Utama Atas */
  font-weight: normal; color: white; /* warna font menu atas */ -moz-box-shadow: 1 2 2 #000000;
  -webkit-box-shadow: 1 2 2 #000000;
  -goog-ms-box-shadow: 1 2 2 #000000;
  box-shadow: 1 2 2 #000000;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  -goog-ms-border-radius: 15px;
  border-radius: 15px;}
  div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active -moz-box-shadow: 1 2 2 #000000;
  -webkit-box-shadow: 1 2 2 #000000;
  -goog-ms-box-shadow: 1 2 2 #000000;
  box-shadow: 1 2 2 #000000;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  -goog-ms-border-radius: 15px;
  border-radius: 15px;color: #000000;background: #fff290; /* background menu atas */ }
  div.TabView div.Pages {clear:both; overflow:hidden; background:transparent; /* background isi */ }
  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="badan">
  <div id="TabView" class="TabView">
  <div style="width:355px;" class="Tabs">
  <a>Daftar Isi</a>
  <a>Recent Post</a>
  <a>Komentar</a>
  <a>Link Blog</a>
  <a>Tukar Link</a>
  </div>
  <div style="width:355px; height:290px; " class="Pages">
  <div class="Page">
  <div class="Pad">
  Isi menu 1
  </div>
  </div>
  <div class="Page">
  <div class="Pad">
  Isi menu 2
  </div>
  </div>
  <div class="Page">
  <div class="Pad">
  Isi menu 3
  </div>
  </div>
  <div class="Page">
  <div class="Pad">
  Isi menu 4
  </div>
  </div>
  <div class="Page">
  <div class="Pad">
  Isi menu 5
  </div>
  </div>
  </div>
  </div>
  </div>
  </form>
  <script type="text/javascript">
  tabview_initialize('TabView');
  </script>
  
  Hasilnya seperti gambar di bawah.
  
  
  
  
• Copy kode berikut untuk Menu Tab View biasa.
  
  <style type="text/css">
  #badan {width: 355px;margin: 3px;padding: 5px;background: url(https://lh5.googleusercontent.com/_QeIxO28ukBc/Tb_dEgDHi7I/AAAAAAAAAeU/qs2r9pSkI1s/buku4.png);overflow: hidden; }
  div.TabView div.Tabs
  {height: 30px;overflow: hidden;}
  div.TabView div.Tabs a {float:left; font-size: 11px; display:block; width: 65px; /* lebar menu atas */
  text-align:center ; height: 18px; /* tinggi menu atas */
  padding-top:6px; padding-left: 2px; padding-right: 2px; border:1px inset #fff290; /* border menu atas */
  text-decoration: none; font-family: "tahoma", Serif; /* Font Menu Utama Atas */
  font-weight: normal; color: white; /* warna font menu atas */ }
  div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {color: #000000;background: #fff290; /* background menu atas */ }
  div.TabView div.Pages {clear:both; overflow:hidden; background:transparent; /* background isi */ }
  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="badan">
  <div id="TabView" class="TabView">
  <div style="width:355px;" class="Tabs">
  <a>Daftar Isi</a>
  <a>Recent Post</a>
  <a>Komentar</a>
  <a>Link Blog</a>
  <a>Tukar Link</a>
  </div>
  <div style="width:355px; height:290px; " class="Pages">
  <div class="Page">
  <div class="Pad">
  Isi menu 1
  </div>
  </div>
  <div class="Page">
  <div class="Pad">
  Isi menu 2
  </div>
  </div>
  <div class="Page">
  <div class="Pad">
  Isi menu 3
  </div>
  </div>
  <div class="Page">
  <div class="Pad">
  Isi menu 4
  </div>
  </div>
  <div class="Page">
  <div class="Pad">
  Isi menu 5
  </div>
  </div>
  </div>
  </div>
  </div>
  </form>
  <script type="text/javascript">
  tabview_initialize('TabView');
  </script>
  
  
  



Hasilnya akan seperti ini.

Catatan: Silahkan ganti tulisan berwarna HIJAU sesuai keinginan Anda. Untuk tulisan berwarna MERAH ganti sesuai dengan judul Menunya dan WIDTH sesuaikan dengan ukuran sidebar blog Anda.

Oke!!! Silahkan berkreasi untuk lebih bagusnya agar sesuai dengan warna blog Anda. Kalau ada yang kurang jelas, silahkan tinggalkan komentar.