tabel menu

 BISNIS TEMPLATE WEB PHP
Para blogger mungkin sudah pernah mencoba membuat tab view menu atau menu dengan tab (lihat gambar di bawah) yang tentu saja dalam pembuatan tab view menunya kita harus mengedit HTML template. Bagi yang belum dan ingin mencobanya, tidak perlu takut. Tulisan kali ini akan membahas cara membuat tab view menu tanpa mengedit kode HTML template.

Caranya sangatlah gampang, tidak perlu susah-susah. Sobat  tinggal menggabungkan kode tab view menu ke dalam sidebar Anda. Masih bingung? Oke, langsung saja ikuti petunjuk berikut ini.

•  Login ke Blogger
• Pilih Menu Rancangan  =>  Tambah gadget  =>  Pilih Html / javaScript
• Kopi paste kode di bawah ini

<style type="text/css">
    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:8px; 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:#000000; /* 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: #FFFF00; /* Warna background Menu Utama Atas */ }
    div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#fff; /* 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: 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="TabView" class="TabView">
    <div style="width: 300px;" class="Tabs">
    <a>judul 1</a>
    <a>judul 2</a>
    <a>judul 3</a>
    </div>
    <div style="width:99%; height:180px; " class="Pages">
    <div class="Page">
    <div class="Pad">
<div style="overflow:auto; background-color: none; text-align: left;"> <script style="text/javascript">
var numposts = 50;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://kodecode.googlecode.com/files/judullabel_tertentu.js'></script>
<ul>
<script src="http://www.sahydin.co.cc/feeds/posts/default/-/Nama Label 1?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=50"></script>
</ul>
<p>
</p></div>
    </div>
    </div>
    <div class="Page">
    <div class="Pad">
<div style="overflow:auto; background-color: none; text-align: left;"> <script style="text/javascript">
var numposts = 50;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://kodecode.googlecode.com/files/judullabel_tertentu.js'></script>
<ul>
<script src="http://www.sahydin.co.cc/feeds/posts/default/-/Nama Label 2?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=50"></script>
</ul>
<p>
</p></div>
    </div>
    </div>
    <div class="Page">
    <div class="Pad">
<div style="overflow:auto; background-color: none; text-align: left;"> <script style="text/javascript">
var numposts = 50;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://kodecode.googlecode.com/files/judullabel_tertentu.js'></script>
<ul>
<script src="http://www.sahydin.co.cc/feeds/posts/default/-/Nama Label 3?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=50"></script>
</ul>
<p>
</p></div>
    </div>
    </div>
    </div>
    </div>
    </form>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>

 ket :   Tulisan warna hijau adalah judul dari menu Sobat, sedangkan tulisan warna biru adalah alamat blog sobat dan warna merah nama label yang akan di tampilkan. Untuk label Yang mempunyai 2 kata sisipkan %20 ditenganhnya.Misalnya nama labelnya 'Aplikasi HP' maka di tulis 'Aplikasi%20HP'. Ingat dalam penulisan label, ini membedakan huruf kecil dan huruf besar.
sedang yang warna Pink Untuk lebar, huruf (font), dan tinggi, silahkan sesuaikan dengan lebar sidebar blog Anda. Untuk warna silahkan lihat kode warna di sini  .

•  Selanjutnya Simpan.