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 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….

This entry was posted on Selasa, September 20th, 2011 at 18:52 and is filed under Tips N Trik. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “Cara Membuat Tab Menu pada Blog”

  1. contoh sop on Agustus 10th, 2014 at 21:13

    makasih tipsnya ya..
    salam dari contoh sop
    http://youtu.be/8MqqR9T6qDs

Leave a Reply