Install Tab View Menu Blogger

Tab View Menu adalah salah satu widget yang berfungsi untuk menghemat tempat pada sidebar blog sehingga blog anda terkesan lebih rapi meskipun banyak gadget yang di install. Untuk membuat Tab View Menu ini diperlukan kode HTML dan juga kode JavaScript yang nantinya akan disisipkan pada kode template.

Supaya tidak terjadi kesalahan pada proses pengeditan, lebih baik Anda membackup dulu kode template blog Anda.

Untuk mengistall Tab View Menu pada blog, Anda bisa mengikuti tutorial di bawah ini.


Langkah 1: Backup Template
Dari menu Dashboard masuk ke tab menu Rancangan | Edit HTML | Download Templat Lengkap sebagai file XML kemudian simpan ke harddisck Anda. Jika nanti terjadi kesalahan pada saat memodifikasi kode template, Anda cukup mengupload ulang template cadangannya.

Langkah 2: Tambahkan Kode CSS
Letakkan potongan kode CSS berikut di antara kode <b:skin><![CDATA[ .... ]]></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;
}

Langkah 3: Tambahkan Kode JavaScript
Letakkan potongan kode JavaScript berikut di antara kode <head>......</head>

view sourceprint?
01<script type='text/javascript'>
02//<![CDATA[
03function tabview_aux(TabViewId, id)
04{
05  var TabView = document.getElementById(TabViewId);
06
07  // ----- Tabs -----
08
09  var Tabs = TabView.firstChild;
10  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
11
12  var Tab = Tabs.firstChild;
13  var i   = 0;
14
15  do
16  {
17    if (Tab.tagName == "A")
18    {
19      i++;
20      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
21      Tab.className = (i == id) ? "Active" : "";
22      Tab.blur();
23    }
24  }
25  while (Tab = Tab.nextSibling);
26
27  // ----- Pages -----
28
29  var Pages = TabView.firstChild;
30  while (Pages.className != 'Pages') Pages = Pages.nextSibling;
31
32  var Page = Pages.firstChild;
33  var i    = 0;
34
35  do
36  {
37    if (Page.className == 'Page')
38    {
39      i++;
40      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
41      Page.style.overflow = "auto";
42      Page.style.display  = (i == id) ? 'block' : 'none';
43    }
44  }
45  while (Page = Page.nextSibling);
46}
47
48// ----- Functions -------------------------------------------------------------
49
50function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
51
52function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
53//]]>
54</script>

Kemudian Simpan Pengaturan Template.

Langkah 4: Menambahkan Widget
Dari menu Edit HTML | Elemen Laman | Tambah Gadget | 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>

Kemudian Simpan.

Catatan:
  • kode warna merah adalah lebar dan tinggi menu
  • kode warna biru adalah judul widget
  • kode warna ungu adalah konten widget 
Anda bisa menyesuaikan kode-kode diatas sesuai kebutuhan template Anda