Membuat Tab View Menu Tanpa Edit HTML di Blog

Caranya cukup meletakkan kode script-nya langsung di gadget. Dengan menyatukan semua
kode yang ada, pembuatan menu tab view tidak perlu lagi dengan mengedit HTML template. 

Lihat gambar di bawah ini dan  tab  menu ini bisa di modiviksi sesuai keinginan:

Ikuti Langkah-langkah berikut ini :

1. login dulu ke blogger

2. kemudian pada Elemen Halaman  klik Tambah Gadget

3. lalu pilih yang HTML/Javascript.

 Setelah itu tambahkan kode script menu tab view dibawah ini:

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */

}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: #fff">Tab 1</span></a>
<a><span style="color: #fff">Tab 2</span></a>
<a><span style="color: #fff">Tab 3</span></a>
</div>
<div style="width: 300px; height: 200px;" class="Pages">

<div class="Page">
<div class="Pad">
konten 1
</div>
</div>

<div class="Page">
<div class="Pad">
konten 2
</div>
</div>

<div class="Page">
<div class="Pad">
konten 3
</div>
</div>
</div></div></form>

<script src="http://johnytemplate.googlecode.com/files/tab_view.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div>

Keterangan: 

• Warna kuning merupakan keterangan dari masing-masing kode
• Warna orange merupakan warna judul Tab 
• Warna hijau merupakan judul Tab Angka 300 pada 'Width' menunjukkan panjang kotak dan 200 pada 'height' menunjukkan tinggi kota. 
• Tulisan tebal merupakan isi tab view. Silahkan ganti dengan teks, link, banner atau widget anda. 
• Atur sesuai keinginan....  selamat  mencoba