Cara Mudah Membuat Tab Menu di Blog

Membuat Tab Menu di Blog inilah tutorial kali ini, nah bagi sobat yang gak mau kepanjangan sidebarnya, ni saya ada solusinya dengan membuat tab menu , caranya gampang kok..

langsung aja pilih add gadget di design, pilih html javascript, dan kopikan 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:#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: 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 Widget yang Ingin ditambahkan 1</a>

    <a>Judul Widget yang Ingin ditambahkan 2</a>

    <a>Judul Widget yang Ingin ditambahkan 3</a>

    </div>

    <div style="width:300px; height:250px; " class="Pages">

    <div class="Page">

    <div class="Pad">

    Isi menu widget tab menu 1 

    </div>

    </div>

    <div class="Page">

    <div class="Pad">

    Isi menu widget tab menu 2

    </div>

    </div>

    <div class="Page">

    <div class="Pad">

    Isi menu widget tab menu 3 

    </div>

    </div>

    </div>

    </div>

    </form>

    <script type="text/javascript">

    tabview_initialize('TabView');

    </script>

oke jangan lupa ganti yang warna merah, demikian tutorial cara memasang tab menu di blog, semoga bermanfaat.

You May Like :

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn