Pasang Menu Tab View

Setelah seminggu diberondong ujian blok XIV, kini ak sempat ngeblog lagi. Pas jalan-jalan pagi, nggak sengaja nemu Trik Tips Blogging. Tak sengaja kulihat sebuah menu yang sangat unik. Kurasa menu tab view ini sangat efektif dan efisien. Tanya kenapa? Dengan ukurannya yang mini dan imut ini, menu tab view bisa memuat isi yang banyak. Kupikir-pikir, menu tab view ini juga bisa digunakan untuk menyimpan link-link blog temen2ku. Kini, link blog temen-temen pun tlah mengisi menu tab view ini. Oya berhubung ak mindah linknya pake manual, mungkin ada link temen-temen yang lupa belum ak pindahin. Nah, buat temen-temen yang linknya belum ak pasang, ingetin aku buat masang link-nya yaa... ^_'v

Nah, gmn c cara memasang menu tab view ini? Berikut ini tutorial cara memasang menu tab view yang ak dapetin dari trik tips blogging:

1. Pilih menu Layout>>Edit HTML
2. Beri tanda centang pada Expand Widget Templates.
3. Kemudian masukkan kode berikut ini sebelum kode <]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px;/* Lebar Menu Utama Atas */
text-align: center;
height: 24px;/* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
-moz-border-radius-topleft:12px;
-moz-border-radius-topright:12px;
border-top: 1px solid #333333;/* Warna Border Atas Menu Utama */
border-left: 1px solid #333333;/* Warna Border Kiri Menu Utama */
border-right: 1px solid #333333;/* Warna Border Kanan Menu Utama */
border-bottom: 1px solid #333333;/* Warna Border Bawah Menu Utama */
font-family: "verdana", Serif; /* Jenis Font Menu Utama Atas */
font-weight: 900; /* Ukuran Font Menu Utama Atas */
color: #1E62B6; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #333333; /* Warna Background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border-left: 1px solid #333333; /* Warna Border Kiri Kotak Utama */
border-right: 1px solid #333333; /* Warna Border Kanan Menu Utama */
border-bottom: 1px solid #333333; /* Warna Border Bawah Menu Utama */
overflow: hidden;
background-color: #333333; /* Warna Backgroun 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;
}

4. Perhatikan text-text yang dicetak miring, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran, warna, dll.
5. Setelah mengatur warna dll, sekarang pasang kode berikut ini dibawah kode </head>
<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>
6. Kemudian Save
7. Masuk ke bagian menu Layout>>Page elements
8. Pilih Add a Gadget >> HTML/Javascript
10. Masukkan script berikut ini:

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; 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>

Keterangan:
- Kode yang berkedip-kedip Adalah text yang di Menu utama (Menu Atas).
- Kode yang ditulis miring adalah isi dari kotak tab view. Kamu bisa mengisinya dengan link, gambar, banner, script dll.

10. Kemudian SAVE. Jadilah menu tab view yang imut.