Membuat Menu Tab View di blogger

Menu tab view biasanya digunakan untuk mencegah halaman blog yang ditampilkan terlalu panjang kebawah karena didalamnya kita bisa menyisipkan beberapa artikel dalam satu kotak. Biasanya menu ini di pasang di sidebar.

Tampilan menu tab view sangat menarik sehingga bisa menarik perhatian pengunjung untuk meng-klik judul yang ada di menu tab view. Jadi tak ada salahnya kalau kita menambahkan salah satu fasilitas ini di blog kita.

Untuk memasang menu tab view di blogspot, langkahnya:
1. Login dulu ke Account blogspot
2. Klik Layout dan pilih Page Element
3. Tambahkan Gadget dan pilih HTML/Script
4. dan didalamnya letakkan 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: #7094C4; /* Warna background Menu Utama Atas */ }

    div.TabView div.Pages {clear:both; border:1px solid #ffffff; /* Warna border Kotak Utama */ overflow:hidden; background-color:#ffffff; /* 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: 10px 10px}

    </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:300px; height:250px; " class="Pages">

    <div class="Page">

    <div class="Pad">

    ISI JUDUL #1  

    </div>    </div>    <div class="Page">    <div class="Pad">

    ISI JUDUL #2

    </div>    </div>    <div class="Page">    <div class="Pad">

    ISI JUDUL #3

    </div>    </div>    </div>    </div>    </form>

    <script type="text/javascript">

    tabview_initialize('TabView');

    </script>

5. JUDUL #  dan ISI JUDUL # (font berwarna) silahkan ganti dengan konten yang ingin ditampilkan
6. Langkah terakhir adalah klik SAVE. Lihatlah hasilnya dengan klik Preview

Semoga bermanfaat


.