Cara Membuat Tab View Menu

Tab Menu memiliki keuntungan karena Anda bisa menghemat ruang yang ada di blog Anda. Dalam tab menu Anda bisa meletakan beberapa gadget, banner serta teks didalam halaman yang sama tetapi dipisahkan oleh kolom tersendiri. Ukuran yang relatif kecil tapi bisa memuat banyak space.
Ingin tau cara membuatnya?silakan ikuti langkah langkah berikut ini :

1. Login pada Blogger

2. Pilih Tata Letak/Layout

3. Pilih Edit HTML

4. Klik Expand Widget Template

5. Cari kode </head>, copy paste kode berikut tepat di atasnya

<script src='http://die-silver.googlecode.com/files/ardi33tabviewv2.js' type='text/javascript'/>

6. Cari kode ]]></b:skin>, kemudian copy paste kode berikut tepat di atasnya

div.Tabardi33 div.TFs
{height: 30px; overflow: hidden;}
div.Tabardi33 div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
background:#f0f0f0;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
}
div.Tabardi33 div.TFs a:hover
{ background: #E8E8E8;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabardi33 div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabardi33 div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabardi33 div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabardi33 div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}

7. Simpan perubahan

8. Kemudian pilih menu Elemen Halaman

9. Tambahkan Elemen HTML/Javascript

10. Copy paste kode berikut, pada Elemen HTML/Javascript

<form action="tabardi33.html" method="get">
<div class="Tabardi33" id="Tabardi33">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Text/kode yang ingin Anda tambahkan (tab1)
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Text/kode yang ingin Anda tambahkan (tab2)
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Text/kode yang ingin Anda tambahkan (tab3)
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Text/kode yang ingin Anda tambahkan (tab4)
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabardi33_name('Tabardi33');</script>

Keterangan

• Yang berwarna biru : Adalah judul menu, hapus text tersebut dan ganti dengan judul yang Anda inginkan
• Yang berwarna merah : Adalah isi menu, hapus text tersebut dan ganti dengan text/kode yang ingin Anda pasang.

11. Simpan Elemen

12. Selesai

Good luck