Cara Membuat Menu Tab Horizontal

Nak buat link tab macam Ana?Ni caranya.Istimewa link tab ini, bila klik akan dibuka di window/tab yang baru.. Ni contoh tab yang ana guna.Tab ni ana dah tambahkan dengan kotak search. Ok ini caranya.



1.Macam biasa Loggin => Layout => Edit HTML. Tambahkan kode dibawah sebelum kode ]]></b:skin>

/* linktab

================== */

#linktab{
background:url(http://i302.photobucket.com/albums/nn113/aburifaie/tabbiru.gif) ;
width: 864px;
height: 30px;
font-size: 11px;
font-family: georgia, Tahoma, Verdana;
color: #ffff66;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-left: 1px solid #000;
border-right: 1px solid #000;
overflow: hidden;
}
#tabright {
width: 200px;
height: 30px;font-size: 11px;
float: right;
margin-right:10px;
margin-bottom:50px;
padding: 0px;
}
#tabright a img {
border: none;
margin: 5px;
padding: 0px;
}

#linktab ul {
margin:0;
padding:1px 10px 0px 0px;
list-style:none;
}
#linktab li {
display:inline;
margin:0;
padding:0;
}
#linktab a {
float:left;
background:transparent;
margin:0;
padding:0 0 0 3px;
text-decoration:none;
}
#linktab a span {
float:right;
height: 35px;
display:block;
background:transparent;
padding:7px 6px 4px 6px;
color:#ffff66;
border-right: 1px solid #000;
}
#linktab a span {
float:none;
}
#linktab a:hover span {
color:#fff;
}
#linktab a:hover {
background-position:0% -42px;
}
#linktab a:hover span {
background-position:100% -42px;
}

2. Warna kod oren untuk panjang tab,Tukar mengikut size main-wrapper Antum. Warna biru pula untuk text dan ungu untuk border,tukarla mengikut selera Antum. Kod Warna Disini.

3. Juga Gantikan kode gambar ni. Disini Ana ada sediakan beberapa warna. Cuma gantikan text tebal merah.

(http://i302.photobucket.com/albums/nn113/aburifaie/tabbiru.gif)

tabbiru.gif


tabhijau.gif


tabkuning.gif


tabmerah.gif



tabungu.gif

4. Kemudian tambah kode berikut dibawah kode ini <div id='content-wrapper'>

<div id='linktab'>
<ul>
<li><a href='URL Link Disini'><span>Home</span></a></li>
<li><a href='http://almansuqie-tips.blogspot.com/' target='_blank'><span>AlmansuQie</span></a></li>
<li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li>
<li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li>
<li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li>
<li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li>
</ul>

<div id='tabright'>
<form action='http://NAMABLOG.blogspot.com/search' id='searchform' method='get' name='searchform'>
<input id='s' name='q' type='text' value=''/>
<input id='searchsubmit' type='submit' value='Cari'/>
</form>

</div></div>

p/s: Kalau xnak kotak carian, buang kod ini.

<div id='tabright'>
<form action='http://NAMABLOG.blogspot.com/search' id='searchform' method='get' name='searchform'>
<input id='s' name='q' type='text' value=''/>
<input id='searchsubmit' type='submit' value='Cari'/>
</form>

</div>

Siap..

Tips² Terkait

Link

• Link Dibuka Dengan New Tab
• Mengalihkan Alamat Blog Ke Alamat Lain
• Dropdown Menu With Colour
• Cara Membuat Brilliant Button
• Membuat Link Pelangi Berkerlipan
• Cara Memasukkan Senarai Link
• Hilangkan "Subscribe to:Posts (Atom)"
• Cara Membuat Top Post
• Menukar Tulisan Older Post
• Membuat Horizontal Link List/Label
• Cara Membuat Text Area
• Cara Memasukkan Link Di Postingan
• Cara Membuat Scrolling Links
• Membuka Link&Label Di Window/Tab Yang Baru

Menu Tab

• Link Dibuka Dengan New Tab
• Cara Membuat Menu Tab Vertical
• Cara Membuat Menu Tab View