Tab menu

Membuat
tab menu blogspot

class="Normal_0020_0028Web_0029__Char" style=" text-decoration: none">Kali ini saya akan menjelaskan cara membuat Tab Menu. Tab Menu sangat bermanfaat sekali karena kita bisa
menghemat ruang yang ada di blog kita dan kita juga bisa meletakan beberapa
gadget ataupun beberapa banner ataupun teks didalam halaman yang sama
tetapi dipisahkan oleh kolom tersendiri dan kolom inipun hanya bisa
dibuka bergantian.

Sebenarnya
memang agak rumit dalam pembuatan Tab Menu ini dikarenakan banyaknya
script yang harus kita copy dan paste ke template maupun gadget, tapi
bagi anda yang suka ngutak-ngatik script, saya pikir bukan hal baru
bagi anda. Andapun bisa meedit script tersebut untuk menyesuaikan dengan
halaman blog anda. Untuk itu silahkan ikuti langkah-langkah berikut
ini :

Langkah Pertama :

1. Login ke Blog 

2. Klik Tab Tata Letak 

3. Klik Tab Edit HTML 

4. Beri tanda centang pada kotak kecil Expand Template Widget 

5. Silahkan cari di dalam template anda kode </head> 

6. Persis sebelum kode tersebut, pastekan script di bawah ini

<script src=’http://h1.ripway.com/pi class="Normal__Char" style=" color: #000099;">nginbelajar/campuran/menu_tab.js’
type=’text/javascript’/>

7. Cari lagi di dalam template anda kode ]]></b:skin> 

8. Persis sebelum kode tersebut, pastekan script di bawah ini

div.TabView div.Tabs { width:
100%; overflow: hidden; border-bottom: 0px solid #000000; font: bold 13px Arial; list-style-type: none;
} 

div.TabView div.Tabs a { float: left; display: block; text-decoration:
none; margin-right: 2px; margin-bottom: 2px; padding: 3px 3px 3px 3px;
color: #FFFFFF; background: #0B615E; } 

div.TabView div.Tabs a:hover { color: #000000; background:#DF0101;
} 

div.TabView div.Tabs a.Active { color: #000000; background:#2E2EFE;
} 

div.TabView div.Pages { width: 100%; overflow: hidden; clear: both;
border: 0px solid #E6E6E6; margin: 25px 0px 5px 5px; padding: 0px 0px
0px 0px; } 

div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow:
hidden; } 

div.TabView div.Pages div.Page div.Pad { padding: 0px 0px; }

 

9. Klik Simpan Template

Langkah Kedua :

1. Masuk ke Blog 

2. Klik Tab Tata Letak 

3. Klik Tab Elemen Halaman 

4. Klik Tambah Gadget 

5. Klik pilihan HTML/JavaScript 

6. Pastekan ke dalam kolom Konten script di bawah ini

<div style=”overflow:auto;
width:100%px; height:100%px; padding:5px 5px 5px 5px; border:1px solid
#999999;”>

<form action=”tabview.html”
method=”get”> 

<div id=”TabView”> 

<div style=”width: 100%;”> 

<a>Judul 1</a> 

<a>Judul 2</a> 

<a>Judul 3</a> 

<a>Judul 4</a> 

<a>Judul 5</a> 

</div> 

<div style=”width: 100%; height: 250px;”>

<div> 

<div>

Entri data anda di sini yang
akan tampil di kolom “Judul 1″

</div> 

</div>

<div> 

<div>

Entri data anda di sini yang
akan tampil di kolom “Judul 2″

</div> 

</div>

<div> 

<div>

Entri data anda di sini yang
akan tampil di kolom “Judul 3″

</div> 

</div>

<div> 

<div>

Entri data anda di sini yang akan tampil di kolom
“Judul 4″

</div> 

</div>

<div> 

<div>

Entri data anda di sini yang akan tampil di kolom
“Judul 5″

</div> 

</div>

</div> 

</div> 

</form> 

<script type=”text/javascript”> 

tabview_initialize(‘TabView’); 

</script> 

</div>

7. Klik Simpan

Kode script di atas yang di awali
dengan tanda # menyatakan warna, seperti #000000 #FFFFFF #999999 #2E2EFE
#E6E6E6 #0B516E #DF0101, silahkan anda ganti dengan warna pilihan anda,
untuk mendapatkan variasi kode warna silahkan anda surfing di sini class="Hyperlink__Char" style=" text-decoration: none;">[ html-color-codes
]

Selamat mencoba,