TAB MENU BERJAJAR TIGA

Ada satu lagi cara untuk menghemat ruang di blog kita, sebut saja Tab Menu Berjajar Tiga. Berikut ini langkah-langkah untuk membuatnya.

1. Login BLOGGER
2. Pada menu Dashbord pilih Rancangan
3. Klik Tambah Wiget di sidebar template Sahabat
4. Pilih HTML / Java Scrept, dan pastekan kode di bawah ini :

<style type="text/css"></div><div style="color: black;">    div.TabView div.Tabs</div><div style="color: black;">    {height: 30px;overflow: hidden}</div><div style="color: black;">    div.TabView div.Tabs a {float:left; display:block; width: 60px; /* Lebar Menu Utama Atas */</div><div style="color: black;">    text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */</div><div style="color: black;">    padding-top:8px; vertical-align:middle; border:1px solid #2E2E2E; /* Warna border Menu Atas */</div><div style="color: black;">    border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */</div><div style="color: black;">    font-weight:bold; color:#FFFFFF; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}</div><div style="color: black;">    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #424242; /* Warna background Menu Utama Atas */ }</div><div style="color: black;">    div.TabView div.Pages {clear:both; border:1px solid #2E2E2E; /* Warna border Kotak Utama */ overflow:hidden; background-color:#151515; /* Warna background Kotak Utama */ }</div><div style="color: black;">    div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}</div><div style="color: black;">    div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}</div><div style="color: black;">    </style></div><div style="color: black;">    <script type='text/javascript'></div><div style="color: black;">    //<![CDATA[</div><div style="color: black;">    function tabview_aux(TabViewId, id)</div><div style="color: black;">    {</div><div style="color: black;">      var TabView = document.getElementById(TabViewId);</div><div style="color: black;">      // ----- Tabs -----</div><div style="color: black;">      var Tabs = TabView.firstChild;</div><div style="color: black;">      while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;</div><div style="color: black;">      var Tab = Tabs.firstChild;</div><div style="color: black;">      var i   = 0;</div><div style="color: black;">      do</div><div style="color: black;">      {</div><div style="color: black;">        if (Tab.tagName == "A")</div><div style="color: black;">        {</div><div style="color: black;">          i++;</div><div style="color: black;">          Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";</div><div style="color: black;">          Tab.className = (i == id) ? "Active" : "";</div><div style="color: black;">          Tab.blur();</div><div style="color: black;">        }</div><div style="color: black;">      }</div><div style="color: black;">      while (Tab = Tab.nextSibling);</div><div style="color: black;">      // ----- Pages -----</div><div style="color: black;">      var Pages = TabView.firstChild;</div><div style="color: black;">      while (Pages.className != 'Pages') Pages = Pages.nextSibling;</div><div style="color: black;">      var Page = Pages.firstChild;</div><div style="color: black;">      var i    = 0;</div><div style="color: black;">      do</div><div style="color: black;">      {</div><div style="color: black;">        if (Page.className == 'Page')</div><div style="color: black;">        {</div><div style="color: black;">          i++;</div><div style="color: black;">          if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";</div><div style="color: black;">          Page.style.overflow = "auto";</div><div style="color: black;">          Page.style.display  = (i == id) ? 'block' : 'none';</div><div style="color: black;">        }</div><div style="color: black;">      }</div><div style="color: black;">      while (Page = Page.nextSibling);</div><div style="color: black;">    }</div><div style="color: black;">    // ----- Functions -------------------------------------------------------------</div><div style="color: black;">    function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }</div><div style="color: black;">    function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }</div><div style="color: black;">    //]]></div><div style="color: black;">    </script></div><div style="color: black;">    <form action="tabview.html" method="get"></div><div style="color: black;">    <div id="TabView" class="TabView"></div><div style="color: black;">    <div style="width: 300px;" class="Tabs"></div><div style="color: black;">    <a>menu 1</a></div><div style="color: black;">    <a>menu 2</a></div><div style="color: black;">    <a>menu 3</a></div><div style="color: black;">    </div></div><div style="color: black;">    <div style="width:300px; height:250px; " class="Pages"></div><div style="color: black;">    <div class="Page"></div><div style="color: black;">    <div class="Pad"></div><span style="color: cyan;">     Isi menu tab 1</span><br /><div style="color: black;">    </div></div><div style="color: black;">    </div></div><div style="color: black;">    <div class="Page"></div><div style="color: black;">    <div class="Pad"></div><div style="color: black;">    Isi menu tab view 2</div><div style="color: black;">    </div></div><div style="color: black;">    </div></div><div style="color: black;">    <div class="Page"></div><div style="color: black;">    <div class="Pad"></div><div style="color: black;">    Isi menu tab view 3 </div><div style="color: black;">    </div></div><div style="color: black;">    </div></div><div style="color: black;">    </div></div><div style="color: black;">    </div></div><div style="color: black;">    </form></div><div style="color: black;">    <script type="text/javascript"></div><div style="color: black;">    tabview_initialize('TabView');</div><div style="color: black;">    </script>

5. Klik save.

Posted in: tutorial blogger