Cara Membuat Tab View Menu

 Bagi anda yang mempunyai blog, pastinya ingin mempunyai blog yang ringan dan tidak berat, salah satun caranya dengan menghemat penggunaan ruang di blog kita, yaitu dengan Tab View Menu. Karena dengan tab view menu, kita bisa memuat banyak ruang tanpa banyak memakan ruang. Nah gimana tertarik ? jika tertarik untuk membuatnya berikut saya akan memberikan Cara Membuat tab View Menu

Sebelum membuat tab view menu itu sendiri, mungkin masih ada yang belum tau, bagaimana rupa tab view menu itu sendiri, seperti inilah bentuknya :

 

jika sudah tau bentuk dan rupanya, sekaranglah waktunya untuk membuat Tab View Menu, karna caranya agak sedikitribet, maka perhatikan baik-baik ya.

CARA MEMBUAT TAB VIEW MENU

• Masuk ke akun Blogger anda terlebih dahulu, klik http://www.blogger.com
• Kemudian, klik Template, lalu klik Edit html, contohnya seperti gambar dibawah ini :

 

• Kemudian untuk lebih aman, back up template anda terlebih dahulu. Lalu letakkan kode javascript 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>

 

• Setelah itu letakkan kode dibawah ini diatas 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; 

• Kemudian simpan template anda
• Langkah selanjutnya adalah, klik tata letak

 

• Kemudian Klik Tambah gadget>Html/javascript, hingga muncul tampilan seperti ini 

• Kemudian tambahkan kode javascript dibawah 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>

1. • Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan andasesuaikan dengan isi.
     
   • Kode yang berwarna biru silahkan sobat isi dengan judul - judul dari menu.
     
   • Dan yang berwarna ungu, adalah isi dari menu. anda bisa menambahkan link, gambar, banner, dll. 
   
    

•  Kemudian simpan/save

Ya, sekian tutorial dari saya kali ini, jika terdapat kesalahan mohon beritahu saya melalui komentar.

Anda baru saja membaca artikel yang berkategori Tutorial Blog dengan judul Cara Membuat Tab View Menu . Anda bisa bookmark halaman ini dengan URL http://expost-jr.blogspot.com/2012/09/cara-membuat-tab-view-menu.html. Terima kasih!

Ditulis oleh: Unknown - Rabu, 05 September 2012