Cara Membuat Menu Tap View

Cara membuat menu tab view atau  Cara membuat menu buka tutup, Cara memasang Tab view di sidebar blog.
membuat menu tab view menu salah satu fungsi nya untuk menghemat ruang dalam blog, karena dalam satu kolom bisa di gunakan tiga (3) widged secara pergantian , misalnya widged popular post, label,arsip.
dengan membuat dan memasang menu tab view maka kita bisa memaksimalkan widged yang lainya terpasang dalam sidebar atau footer sehingga menu yang ada dalam blog akan terpasang semuanya.
lalu seperti apa sih tampilan dari menu tab view tersebut contohnya seperti pada gambar di bawah ini

Cara pembuatan widged menu view tab sebenarnya cukup mudah hanya menambahkan tiga (3) rangkain kode html kedalam Html template blogger , dengan menyimak panduanya di bawah ini saya yakin sobat blogger bisa memasang widged menu view tab pada blog masing-masing.
dan cara pembuatanya seperti di bawah ini :

Cara membuat widged menu view tab
1.buka blog anda masing-masing bisa melalui www.blogger.com lalu login kedalam blog masing-masing
2.selanjutnya klik desain untuk menuju dashboard blogger
3.lalu pilih / klik template dan klik lagi Edit Html ( panduan gambarnya bisa melihat gambar yang ada di bawah ini)

4.lalu cari kode didalam Html kode seperti ini ]]></b:skin>
5.selanjutnya kopi kode yang ada di kolom di bawah ini lalu pastekan/letakan di atas 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.cari lagi kode di dalam html kode seperti ini </head>
7.lalu kopi lagi kode yang ada di kolom di bawah ini lalu pastekan/letakan di atas 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>

8.selanjutnya simpan template nya

Sampai tahap ini belum selesai  jadi masih ada satu tahap lagi akan tetapi untuk tahap ke tiga ini memasukan kode html nya bukan dari HTML template tetapi di masukan lewat widged dan widged ini nantinya yang akan terlihat dalam blog anda.

9.jadi langkah selanjutnya setelah menyimpan template nya perhatikan  menu dalam dashboard blogger lalu pilih/klik tata letak (panduan gambarnya lihat gambar nomor dua dari atas)
10.lalu klik tambahkan gadged dan pilih gadged gadged HTML/javascript, panduan gambarnya lihat gambar di bawah ini

11.selanjutnya kopi kode yang ada di kolom di bawah ini lalu pastekan ke dalam kolom gadged 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>

Keterangan :
anda bisa merubah ukuran widged nya da juga bisa mengubah nama widgednya

12.lalu simpan gadged html/javascriptnya
13.selesai

Demikianlah panduan setting blog dan website tentang cara membuat atau memasang widget tab view di blog/website , semoga kalian bisa mengikuti panduan ini dengan mudah , jika ada kesulitan silahkan untuk berkomentar saja ya..