Cara Buat Tab view pada Blog

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

 

permisi Blogger,, Sudah lama gak posting Blog, Gatel juga nich tangan. oke langsung aja, pada posting kali ini saya akan berbagi tentang bagaimana membuat TAB VIEW MENU pada blog. tab view ini merupakan menu untuk menghemat tempat karna ukurannya relatifkecil, tapi bisa memuat banyak tempat. membuat menu tab view memerlukan kode html yang lumayan ribet, tapi jangan kuatir asalkan sobat mengikuti tutorialnya dengan baik. jika setelah jadi nanti tinggi dan lebar menu tidak sesuai, silahkan anda atur sendiri tinggi dan lebarnya. oke Bro... langsung aja ikuti tutorialnya di bawah ini, jangan kupa berdoa,,, heheheheheh.......




1. Silahkan login ke Account Blogger anda.
2. Silahkan klik Rancangan.
3. Silahkan Klik EDIT HTML
     (jangan lupa  BackUp template anda dengan mengklik Download Template Lengkap)
4. Letakkan kode ini sebelum kode </head>.  
  
 <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>

5. setelah itu letakkan kode ini sebelum kode ]]></b:skin>

    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: 3px;
   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: 3px 5px;
  }

6. kemudian Simpan/Save Template
7. Langkah selanjutnya klik Rancangan
8. Klik Tambah Gatget
9. Pilih html/javascript dan tambahkan kode di bawah ini

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">

<a>Tab 1</a>

<a>Tab 2</a>

<a>Tab 3</a>

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

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

Tab 1.1 <br />

Tab 1.2 <br />

Tab 1.3 <br />

</div>
</div>

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

Tab 2.1 <br />

Tab 2.2 <br />

Tab 2.3 <br />

</div>
</div>

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

Tab 3.1 <br />

Tab 3.2 <br />

Tab 3.3 <br />

</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script>

10. klik Simpan/Save

Keterangan
          * Untuk kode Warna MERAH adalan Lebar dan Tinggi Menu, silahkan anda sesuaikan.
          * Untuk kode warna BIRU silahkan isi Judul- judul dari menu
          * Untuk kode warna HIJAU silahkan isi Link, Gambar, Banner dll.

SELAMAT MENCOBA,, HAPPY BLOGGING.

Artikel Terkait