Membuat Tab Menu

Sebenernya cara untuk membuat tab menu ini sudah banyak bertebaran di internet. tapi karena permintaan temen, aku tuliskan lagi cara  membuat tab menu. mudah-mudahan bermanfaat bagi kita semua. caranya adalah sebagai berikut:

seperti biasa,  pertama  login dulu di blog kamu....
kemudian masuk ke Tata Letak  Trus... Edit HTML

Saya sarankan untuk backup template terlebih dahul, untuk menghindarkan hal" yang tidak di inginkan

kemudian kamu cari kode berikut : ]]></b:skin>

setelah ketemu copykan kode berikut pas di atasnya:

#tabmenu {
 overflow: hidden;
 font-size: 12px;
 float: left;
 display: inline;
background:#70DBFF;          /*warna tab menu */
 width: 900px;                        /* panjang tabmenu */
 height: 30px;                         /*tinggi tab menu*/
}
#tabmenu a {
 text-decoration:none;
 display:block;
}
#tabmenu a {
 margin:0;
 float:left;
 background: none;
 padding: 9px 15px;
 text-transform:uppercase;
 color: #CCCCCC;
 font-size: 11px;
}
#tabmenu li a:hover, #tabmenu li a:focus, #tabmenu a.mainMenuParentBtnFocused{
 background: #8FABFF;     /*warna hover*/
 color:#fff;
}
#tabmenu , #tabmenu ul {
 padding: 0;
 margin: 0;
 list-style: none;
 line-height: 1em;
}
#tabmenu ul {
 background: none;
 left:0;
}
#tabmenu li {
 border-right:1px solid #fff;
 cursor: pointer;
 float: left;
 margin: 0 0px 0 0px;
 padding: 0 2px 0 1px;
 height: 30px;
 display: inline;
}

setelah itu kamu cari lagi kode berikut: <div id='main-wrapper'>

dan copykan kode berikut di atasnya:

<div id='tabmenu'>
<ul>
<li><a href='link-mu' target='_blank'>value</a></li>
<li><a href='link-mu' target='_blank'>value</a></li>
<li><a href='link-mu' target='_blank'>value</a></li>
<li><a href='link-mu' target='_blank'>value</a></li>
</ul>
</div>

Perhatikan...

Untuk mengetahui kode warna kamu bisa lihat disini
Untuk menyesuaikan panjang Tabmenu dengan blog kamu  rubah nilai  width_nya.
Tulisan berwarna pink adalah link yang akan dituju bila di klik.
Tulisan berwarna hijau adalah value dari tabmenu tersebut.
sebagai contoh dalam penulisannya, adalah sebagai berikut.

<li><a href='http://www.mastra.co.cc' target='_blank'>My Blog</a></li>

gitu aja ko, kemudia simpan dan lihat hasilnya....
semoga bermanfaat bagi kita semua....

Posted in: Tips Bloging