Cara membuat tap menu view

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

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

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

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/AVvXsEiE-8b23SIZjzs3JINLNfSXnlZ94tcuV239vI5UVoQrCC3tYooLopKZOWVyRbYm49fAOWWvsRr5l1cVZu-0RjJjJrfsAwtIMlfz2CQ1L4bYPAIgvgelLSCo7CmVI7BuLj5lEIBFXx-2UI-n/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;
}

Klik simpan template
Selanjutnya pilih Rancangan > Elemen halaman >Tambah gadget

Tambahkan HTML/JavaScript

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>