Cara membuat tap menu view

Tap menu view merupakan salah satu solusi untuk menghemat halaman blog anda, jadi saya sarankan agar anda membuat tap menu view pada blog anda. Tap menu view sangat efisien, anda tidak perlu menambahkan banyak widget kedalam halaman blog anda.Tap menu view dengan ukuran yang relatip kecil tetapi dapat memuat space yang banyak, bisa anda gunakan untuk berbagai keperluan anda. Contoh Tap menu view yang akan kita buat adalah seperti ini :

Domo tap menu view bisa anda lihat pada sidebar halaman blog ini.
Langkah-langkah membuat tap menu view adalah sebagai berikut:

1. Log in terlebih dahulu kehalaman blog anda
2. Pilih Rancangan >Edit HTML

3. Download lengkap template terlebih dahulu untuk mengantisifasi kesalahan dalam Edit HTML
4. Cari kode </head> gunakan tombol (ctrl + f atau F3) untuk memudahkan pencarian kode
5. Copas kede dibawah  diatas 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>

6. Cari kode ]]></b:skin>

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 105px; /* Lebar Menu Utama Atas */
background:#000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x;

text-align: center;
height: 45px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #2a2525; /* 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 */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background:#5b4848;url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFN3CJJmA0ZwXkrSzoDVrIEljbLt4wXCFJey_N7s4g2rpS6ejlgzJ5010UKsqA3Ar2Lhp7-yCf20lQZiQuCPXdmruZMI0yLjThVknh4omiAPE6DZ9F1sVM1welTBnOu4iGEqS8A_lae9dP/s320/b3.gif) no-repeat;
list-style-type:none;/* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #2a2525; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #eeeeee; /* 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;
}

7. Klik simpan template
8. Selanjutnya pilih Rancangan > Elemen halaman >Tambah gadget

9. Tambahkan HTML/JavaScript

10. Copas atau masukan kode berikut  delaman Box HTML/JavaScript

<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>

11. Klik Simpan

Keterangan :

• Kode warna coklat adalah lebar dan tinggi menu silahkan anda sesuaikan 
• kode warna biru adalah Judul menu-menu tap view anda
• kode warna merah adalah isi/sub-sub menu

Selesai dan selamat mencoba Jika gagal jangan pernah menyerah coba,coba, dan coba terus