Mutiara Kata



Tab Menu 2


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;
Ein
Exploding-boy
Blog Widget by LinkWithin

Untuk pengetahuan pengunjung, Blog ini tidak lagi aktif dan saya sudah pun berpindah ke Blog Wordpress.org. Terima Kasih diatas sokongan anda sebelum ini.
Sudi-sudilah mengujungi Blog Wordpress saya di sini...
ANOTHER STRANGE GIRL STORIES

16 Kata Pelawat:

Azmil Ahud ® said...

great ! thnx :)

AkuroSan said...

you're welcome..

Hafizul Asyrul said...

preview die xde kee

AkuroSan said...

ada... kamu boleh check kat sini;

http://exploding-boy.com/images/cssmenus/menus.html

Robiatul Adaweyah Saad said...

Salam Akuro San...
TQ Coz Buat Gak Tutorial Nieyh...
Tunggu Gak Dari Ari Ahad Tuh...
Ahad Tuh 3 4 Kali Gak Lah Usha Blog Awak...
Urm...
Code Yg Tab Menu Yg Lama Kena Buang Ke???...

Robiatul Adaweyah Saad said...

Alamak Akuro San...
X Tau Lak Ape Masalah...
Tak Jadi Lak...Pening Dah Nieyh...
Pelik Gak.;

AkuroSan said...

Robiatul: boleh beritahu apa error yg kuar tak?

mungkin boleh refer pd langkah yg ke-9 katentry nih...

Robiatul Adaweyah Saad said...

div id='newsidebar-wrapper .........
code nieyh sy x de...

AkuroSan said...

salam.
klu tak dapat cari yg kat atas tuh, cuba cari yg mcm nih...

<b:section class='sidebar' id='sidebar' preferred='yes'>

ok, jadi tak?

Robiatul Adaweyah Saad said...

Akuro San...
Dah try da...
X tau ah ape mslah nye...
Bile move kat header...
Jadi cam Labels biasa jerk...
X jadi tab menu...
Blur ah...

AkuroSan said...

rasanya kena Robiatul check balik kod dia. pastikan letak kat tempat yg betul..
saya dah cuba buat, ok jer nih...

Robiatul Adaweyah Saad said...

The widget with id LinkList1 is not within a section (actual parent element is: div.) Every widget should be in a section.

kalo kuar cam tuh lak ape prob nye erk??

Robiatul Adaweyah Saad said...

tab menu yg sy buat...
sy amek bulat² awk nye...
coz x jd jerk kan...
tuh yg copy paste jerk

AkuroSan said...

ok, kalau keluar error yg mcm tu, cuba tukar LinkList1 tu kepada Linklist9 ker... mcm yg saya beritahu kat langkah ke-9...

mcm mana... jadi tak?

Robiatul Adaweyah Saad said...

pape hal tq lah erk....
wpon x jd..

AkuroSan said...

maaf yerk... tak pasti mana silap nyer...
sbb yg saya buat jadi...
what ever pun, thanks kerana mencuba...

Post a Comment

Terima Kasih, kerana sudi berbicara di sini...





Blog Widget by LinkWithin
 
Powered By Blogger | Design By iEn © 2008 | Edited By AkuroSan | Kontes Review Klinik Cinta | Contest SEO Eridy | Best View: Firefox | Top