Membuat Menu Tab View di Blog

Oke Para SObar Bloger ALngsung saja Cara Membuat Menu Tab View di Blog.
Menu tab view ini digunakan untuk menghemat tempat di blog karena menu ini merupakan gabungan dari beberapa menu lainnya. Mungkin para bloger yang Sudah sempit tidak bisa tambah Gadget lagi. Selain itu juga bisa membuat tampilan blog kita lebih terkesan keren dan minimalis. Pastinya sobat sudah pernah lihat semua kan menu tab view ini, salah satu contohnya dibawah:

Berikut langkah -langkah nya:
Login  ke akun blogger sobat.
Langsung menuju ke menu Template
Pilih Edit HTML
Terus centang Expand Widget Template
 Cari kode ]]></b:skin> , kemudian letakkan kode dibawah ini tepat DIATAS kode ]]></b:skin>

/* Menu Tab View

----------------------------------------------- */

div.TabView div.Tabs {

padding-top: 0px;

height: 24px;

overflow: hidden;

}

/* Menu Utama */

div.TabView div.Tabs a {

float: left;

display: block;

width: 90px; /* ukuran lebar menu */

text-align: center;

height: 24px; /* ukuran tinggi menu */

padding-top: 3px;

margin-right:4px; /* jarak antarmenu */

vertical-align: middle;

border: 1px solid #CCC; /* warna border menu */

border-bottom-width: 0;

font-family: "Arial", Times New Roman, Serif; /* jenis huruf menu */

font-size: 12px; /* besar hurup menu */

letter-spacing: -1px;

background-color: #A4A4A4; /* warna latar menu */

color: #FFFFFF; /* warna hurup menu */

-moz-border-radius-topleft:10px;

-moz-border-radius-topright:10px;

}

div.TabView div.Tabs a.Active {

background-color: #888888; /* warna background menu aktif */

color: #FFFFFF;

}

div.TabView div.Tabs a:hover {

background-color: #999999; /* warna background menu hover */

color: #FFFFCC;

font-weight: bold;

}

/* Kotak Utama */

div.TabView div.Pages {

clear: both;

border: 1px solid #CCC; /* warna border kotak utama */

overflow: hidden;

background:url("http://i864.photobucket.com/albums/ab206/kibagus/th_bgtabview.gif"); /* 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;

font-size: 12px; /* besar huruf kotak utama */

}

*Huruf yang berwarna merah di rubah  sesuai yang sobat inginkan

   Kemudian letakkan lagi kode berikut ini tepat DIBAWAH kode  ]]></b:skin>

<script src="http://sites.google.com/site/kibagusnet/x-design/tabview.js" type="text/javascript"/>

    Kemudian simpan template sobat.
    Sekarang lanjut ke langkah berikutnya, langsung menuju ke menu Layout (tata letak)
    Klik Add Gadget dan pilih HTML/JavaScript.
    Lalu copy paste kode berikut di kotak yang disediakan:

form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1">Menu 1</a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
</div>
<div style="width: 99%; height: 200px;" class="Pages">
<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.dst<br/>
</div></div>
<!--Akhir Menu 1-->
<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Isi Menu 2.1<br/>
Isi Menu 2.2<br/>
Isi Menu 2.dst<br/>
</div></div>
<!--Akhir Menu 2-->
<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.dst<br/>
</div></div>
<!--Akhir Menu 3-->
</div></div></form>
<script type="text/javascript">tabview_initialize('TabView');</script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://kibagus-homedesign.blogspot.com/" target="_blank" title="Tabview Widget">HDesign-comm</a></div>

Thanks to http://arif-sape-chelsea.blogspot.com/2011/12/cara-membuat-menu-tab-view-di-blog.html