
Tutorial kali ni sebenarnya dah lama di request oleh saudari Robiatul Adaweyah... Cuma saya jer yang masih belum sempat nak siapkan tutorial nih. huhu... Jadi, saya minta maaflah, sebab lewat sikit keluarkan entry nih...
Kalau sebelum ni saya pernah mengeluarkan entry cara nak buat link tab, dimana cara sebelum nih agak simple, tapi rupa dia kurang menarik sikit. Jadi untuk Tab Menu kali nih, dia lebih kurang macam link tab, tapi ianya lebih menarik dan tak nampak simple sangat.
Sebelum tu, dibawah ni saya senaraikan jenis-jenis link berserta URL image nya sekali, untuk kemudahan kamu.
Untuk preview Menu Tab, lihat di SINI...

http://img37.imageshack.us/img37/1424/tabright.gif
http://img39.imageshack.us/img39/3484/tableft.gif

http://img142.imageshack.us/img142/3606/tableftb.gif
http://img194.imageshack.us/img194/9976/tabrightb.gif

http://img133.imageshack.us/img133/1036/tableftc.gif
http://img528.imageshack.us/img528/2045/tabrightc.gif

http://img37.imageshack.us/img37/5580/tableftd.gif
http://img186.imageshack.us/img186/9782/tabrightd.gif

http://img194.imageshack.us/img194/2521/tablefte.gif
http://img43.imageshack.us/img43/6500/tabrightew.gif

http://img194.imageshack.us/img194/1980/tabrightf.gif
http://img528.imageshack.us/img528/3448/tableftfe.gif

http://img133.imageshack.us/img133/5541/tableftg.gif
http://img43.imageshack.us/img43/5047/tabrightg.gif

http://img194.imageshack.us/img194/7228/tabrighth.gif
http://img133.imageshack.us/img133/3761/tablefth.gif

http://img528.imageshack.us/img528/8671/tablefti.gif
http://img528.imageshack.us/img528/2653/tabrighti.gif

http://img142.imageshack.us/img142/7180/tableftj.gif
http://img528.imageshack.us/img528/1342/tabrightj.gif

http://img194.imageshack.us/img194/5605/tableftk.gif
http://img133.imageshack.us/img133/5074/tabrightk.gif
Ok, tanpa membuang masa, di bawah ni saya sediakan cara nak buat dia...
Baca betul-betul ya...
1. Masuk ruangan layout dan klik 'Edit Html'.
2. Tak perlu tanda pada kotak (Expand Widget Template).
3. Cari kod di bawah, menggunakan 'CTRL+F'
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">4. Tukarkan kod diatas menjadi seperti kod dibawah.
<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">
5. Dengan menggunakan 'CTRL+F', cari pula kod ini;
]]></b:skin>6. Copy kod dibawah, dan paste kan ia diatas kod
]]></b:skin> tadi.
/*- Menu Tabs E--------------------------- */
#tabsE {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url("http://img194.imageshack.us/img194/2521/tablefte.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url("http://img43.imageshack.us/img43/6500/tabrightew.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}
7. Lihat URL link tab yang dah saya sediakan diatas, copy dan paste kan ia pada
tulisan merah dalam kod tadi. Contoh diatas, saya menggunakan '
Tab Menu E'. Bahagian yang di
Bold, menandakan URL image, sama ada ia untuk' image left' atau 'image right'. Hati-hati semasa meng'copy, jangan sampai tertukar image ya...
8. Untuk meletakkan widget link, copy kod dibawah.
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>
<div id='tabsE'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>
<span>Home</span></a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><span>
<data:link.name/></span></a></li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
Paste kan ia dibawah kod ini;
<div id='newsidebar-wrapper'><b:section class='sidebar' id='newsidebar' preferred='yes'>9. Save Template. Jika
b:widget id='LinkList1' tu dah ada dlm Page Element, tukarkan kepada
LinkList2. Kalau tak boleh save juga, tukar kepada
LinkList3 dan seterusnya, sampai boleh di save.
10. Masuk ke ruangan Layout. Lihat 'Page Element'. Kamu akan jumpa 'Widget Link List (LABEL)' tu ada di
sidebar. Dragkan ia ke
Header seperti gambar dibawah. Save kan.

11. Dengan adanya 'Widget Link List' ini, kamu mudah untuk meletakkan atau menukar sebarang link pada masa akan datang tanpa perlu 'menggodek' 'Edit HTML' lagi...
Selamat Mencuba...
Rujukan;
EinExploding-boy