Membuat Menu Tab View Tanpa Edit HTML

Tutorial ini saya berikan yang plus-plus, karena jika orang lain memberikan tutorialnya tentang Tab Menu View mungkin tampilannya akan seperti di bawah ini.


Menu tab yang seperti itu membuat blog yang tadinya keren malah jadi gak keren. Saya akan memeberikan tutorialnya yang keren. Yang hasilnya bisa tergambar di bawah ini


Kerenkan ? Nah, pastinya anda sudah tidak sabar untuk menampilkan widget ini ke dalam blog anda agar semakin cantikkan ? Yasudah saya langsung berikan tutorialnya

1. Loggin ke dalam blogger
2.Pergi ke Rancangan
3. Add gadget atau Tambah Gadget
4. Pilih HTML/Javascript
5. Masukkan kode di bawah ini ke dalam javascript

<style type="text/css">
    div.TabView div.Tabs
    {height: 30px;overflow: hidden}
    div.TabView div.Tabs a {float:left; display:block; width:92px; /* Lebar Menu Utama Atas */
    text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
    padding-top:8px; vertical-align:middle; border:1px solid #FFFFFF; /* Warna border Menu Atas */
    border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */

    font-weight:bold; color:#ffffff; /* Warna Font Menu Utama Atas */ background:url(http://i1015.photobucket.com/albums/af273/yomaricoy1/BgInfo-1.png) repeat-x top left;  -moz-border-radius:5px-topleft;
background:#ffffff url(http://i1015.photobucket.com/albums/af273/yomaricoy1/BgInfo-1.png) repeat-x top left;  -moz-border-radius:5px-topright}
  
 

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background:url(http://i1015.photobucket.com/albums/af273/yomaricoy1/Untitled-1-1.jpg) no-repeat;
font-weight:bold; color:#FFF; /* Warna background Menu Utama Atas */ };

 /* Warna background Menu Utama Atas */ }

div.TabView div.Ul{list-style-type:none;margin:0px;padding:0px;}
div.TabView ul li{padding:10px 0 6px 10px;margin:0; border:5px dotted #08088A; background:#FFF;
/* Link Halaman */ }

    div.TabView div.Pages {clear:both; border:1px solid #000000; /* 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: 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:290px;" class="Tabs">
    <a>Judul 1</a>
    <a>Judul 2</a>
    <a>Judul 3</a>
    </div>
    <div style="width:290px; height:250px; " class="Pages">
    <div class="Page">
    <div class="Pad">

                       Isi Link 1

</div>
    </div>
    <div class="Page">
    <div class="Pad">
                          isi Link 2
</div>
    </div>
    <div class="Page">
    <div class="Pad">

                    Isi Link 3

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

Ket : Warna biru ganti dengan Judul yang kamu pilih.
Warna Ungu adalah lebar (width) dan tinggi (height) border.
Warna Merah silahkan isi link yang kamu inginkan.

6. Save

Ok, kalau anda masih belum mengerti saya akan perjelas dengan langsung terjun ke tutorialnya. Perhatikan

kode yang panjang seperti yang di atas saya rubah menjadi seperti ini sesuai warna




<style type="text/css">
    div.TabView div.Tabs
    {height: 30px;overflow: hidden}
    div.TabView div.Tabs a {float:left; display:block; width:92px; /* Lebar Menu Utama Atas */
    text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
    padding-top:8px; vertical-align:middle; border:1px solid #FFFFFF; /* Warna border Menu Atas */
    border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */

    font-weight:bold; color:#ffffff; /* Warna Font Menu Utama Atas */ background:url(http://i1015.photobucket.com/albums/af273/yomaricoy1/BgInfo-1.png) repeat-x top left;  -moz-border-radius:5px-topleft;
background:#ffffff url(http://i1015.photobucket.com/albums/af273/yomaricoy1/BgInfo-1.png) repeat-x top left;  -moz-border-radius:5px-topright}
  
 

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background:url(http://i1015.photobucket.com/albums/af273/yomaricoy1/Untitled-1-1.jpg) no-repeat;
font-weight:bold; color:#FFF; /* Warna background Menu Utama Atas */ };

 /* Warna background Menu Utama Atas */ }

div.TabView div.Ul{list-style-type:none;margin:0px;padding:0px;}
div.TabView ul li{padding:10px 0 6px 10px;margin:0; border:5px dotted #08088A; background:#FFF;
/* Link Halaman */ }

    div.TabView div.Pages {clear:both; border:1px solid #000000; /* 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: 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:290px;" class="Tabs">
    <a>Narkotika</a>
    <a>Kisah</a>
    <a>Tips-Tips</a>
    </div>
    <div style="width:290px; height:250px; " class="Pages">
    <div class="Page">
    <div class="Pad">
<li><a href='http://narkobatik.blogspot.com/2010/11/narkotika.html'> Narkotika</a></li>
<li><a href='http://narkobatik.blogspot.com/2010/08/pengertian-narkoba.html'>Pengertian Narkoba (2)</a></li>
<li><a href='http://narkobatik.blogspot.com/2010/08/arti-definisi-pengertian-narkotika-dan.html'> Perngertian Narkoba</a></li>
</div>    </div>
    <div class="Page">
    <div class="Pad">
    <li><a href='http://narkobatik.blogspot.com/2010/12/tujuh-kebiasaan-jomblo-yang-tidak.html'> Tujuh Kebiasaan Jomblo</a></li>
<li><a href='http://narkobatik.blogspot.com/2011/06/trauma-narkoba.html'> Trauma Narkoba!! </a></li>
<li><a href='http://narkobatik.blogspot.com/2011/05/narkoba-bikin-mamaku-menangis.html'>Narkoba Bikin Mamaku Menangis </a></li>
</div>
    </div>
    <div class="Page">
    <div class="Pad">
    <li><a href='http://narkobatik.blogspot.com/2010/12/kiat-menyampaikan-bahaya-narkoba-kepada_02.html'> Kiat Menyampaikan Bahaya Narkoba Kepada Aanak Sesuai Tahapan Usia</a></li>
<li><a href='http://narkobatik.blogspot.com/2011/02/tips-orangtua-jika-mengetahui-anak.html'> Tips Orangtua Jika Mengetahui Anak Menyalahgunakan Narkoba</a></li>
    </div>
    </div>
    </div>
    </div>
    </form>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>

Nantinya kode di atas akan membentuk seperti widget di blog ini Klik Disini

Nah, kalau sudah mengerti berarti ilmu saya sudah bisa di amalkan oleh kalian