Wadah Madrasah Pengalaman: Tutorial letak/susun menu tab di header

Gambar di ambil dari http://nusha1706.blogspot.com/

Assalammualaikum...

Kali nie Wan nak wat Tutorial macam mana nak susun or letak menu tab dalam header..Korang leh tengok kat blog http://nusha1706.blogspot.com/..Bergantung jugak sama ada owner blog masih menggunakan template tersebut.

Jom Tutorial..

Sebenar nya benda nie Wan dah siapkan Tutorial..Cara nya senang je..Hanya perlu gabungkan Tutorial Wan sebelum nie..

Tutorial Add Ruang Gadget atas Header dalam page Element
Tutorial wat horizontal Kawaii menu tab (navigation bar)
Tutorial letak gadget/animation/dll dalam Header

So kali nie Wan akan ajar korang dengan lebih detail lagi..Mula mula korang kene wat Header korang.Korang kene wat tempat nak letak menu tu nanti..Macam header kat bawah nie..

Bila dah selesai tu..Korang upload macam biasa je..Dan lepas tu korang Kene add ruang gadget atas header korang..Korang leh tengok Tutorial nie..
Tutorial Add Ruang Gadget atas Header dalam page Element.

Selesai add gadget atas header korang mulakan lah operasi seterusnya..

Klik Add gadget pada atas header korang dan pilih HTML..

Selepas tu korang copy kod kat bawah nie...Dan Paste kan dalam Add gadget >HTML korang tadi..

<div class='clear'></div>
<div class='widget html' id='html1'>
<div class='widget-content'>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

Dan lepas tu korang copy lak kod kat bawah nie dan pastekan di bawah kod tadi.

Kod kedua dekat bawah nie adalah kod untuk icon Home..Korang leh ubah kod icon tersebut ekot Tutorial nie k..
Tutorial ubah icon horizontal Kawaii menu tab

top: 65px; left:207px; nie adalah kedudukan menu korang tu..So korang kene ubah nombor untuk ubah kedudukan menu korang..So kene try n error lah k..

LINK MENU KORANG" yang nie lak adalah link yang korang nak link kan tu..

Home' adalah tajuk untuk menu korang..pastikan setiap kali korang wat menu nie utk lain lain menu korang kene ubah tajuk dia.

width="110" height="80" yang nie lak untuk size icon korang..

Selesai masukan kod tu..dan kalau korang nak tambah menu tab lagi Korang copy lagi kod kedua dan ubah lah apa yang perlu hanya paste kan dibawah kod sebelum.

LAst sekali korang tutup kod korang dengan kod nie.

So selesai..

banyakkan try n error untuk susun menu tu taw...Sabar..

.

29 comments:

nuyui a.k.a miss YUI said...: wah2.. cam kenal blog tu..

tgkla sape designnya kan..

tq yer wan..

tenang skit dengan template baru ni =); September 20, 2011 at 10:25 AM
Wan_hazel said...: hahaha..a ah lah kan macma kenal je..hehehe...terima kasih jugak taw koz suka template tu; September 20, 2011 at 10:34 AM
cik wanie Lovela (CWL) said...: kawan yg dilupakan singgah sini; September 20, 2011 at 11:05 AM
Wan_hazel said...: CWL..wan tak lupa lah....; September 20, 2011 at 11:13 AM
Amilia Ami said...: wahhhh pening sudaaa; September 20, 2011 at 10:14 PM
cik gurlzanne said...: comell :)); September 21, 2011 at 1:25 AM
Wan_hazel said...: dunia cik maia

hahaha..pening dah..; September 21, 2011 at 10:13 PM
Wan_hazel said...: cik gurlzanne

tengs taw; September 21, 2011 at 10:13 PM
Wansteddy Tales said...: tingin nak godek2 blog dgn coding mcm2 ni. tp sekali buat dulu rosak 1blog! hahha... sejak tu serik hakak nk usik coding blog even sesimple pn seram2. tiap kali jengah blog wan yg bnyk tutorial ni niat membuak2 nk ubah juga hahah...; September 22, 2011 at 3:10 AM
Wan_hazel said...: wan dulu pun pernah hancurkn blog kak..tapi perasaaan ygt ak leh nak bendung utk godek2 blog suruh lebih cantek so tak leh nak trauma2..ehehe; September 22, 2011 at 10:00 PM
Dang said...: wan. bile cursor dihalakan. gambar tak berubah. mcm takde link yg boleh di klik. try buat tutorial letak gadget kat header pon tak menjadi. :(; October 10, 2011 at 12:07 AM
AL-AINA said...: tak keluar langsung header nyer; October 14, 2011 at 11:03 PM
Ain Shdn said...: wan, ahaks.. thanks.. CB follow this tutorial.. first time buat header yang button menu bar kat header . nice tutorial XD; October 17, 2011 at 4:02 PM
Wan_hazel said...: hehehe...welkam VB...n tengs jugak..; October 17, 2011 at 8:57 PM
Wan_hazel said...: al aina.

aii...camne tak kuar tu??; October 17, 2011 at 9:06 PM
Wan_hazel said...: Cik Tina

mesti kod tu salah..; October 17, 2011 at 9:16 PM
Unknown said...: waaaaan... nk tnye..

nape sya bt 2.. image utk link cth 'home' 2 en kat blakang gmbr header 2??

n 1 lg.. link dy xnaik pn..
cth nye, kalo kite lalu kn mouse kt gmbr y ade link, akn brubah kaler.. tp xde prubahan un.. bile klik kt gmbr 2, dy kuor y home page punyee..

bnyk kli da buad =,=; October 25, 2011 at 1:44 PM
Wan_hazel said...: mujahidah solehah

pelik jugak..koding salah kot...dah add gadget atas header?; October 25, 2011 at 10:31 PM
Unknown said...: tatau.. sya just copy cooding wan 2 ja..

add gadget ats header pun suda; October 26, 2011 at 12:05 AM
Wan_hazel said...: law copy mesti boleh....mungkin ada salah kod tu; October 26, 2011 at 10:58 PM
Unknown said...: haa.. sya da taw da nape klik kt ''link home'' 2 dy kuor home page jgk...

sya try ejas kdudukan link home 2 kt luor header..menjadi !.. tp, bile ejas balik buh dlm header xmenjadi.. nape ea?? =,=; October 28, 2011 at 4:10 PM
Wan_hazel said...: pelik betul..septutnya boleh je...; October 28, 2011 at 8:58 PM
Unknown said...: aduii.. ye eaa...; October 28, 2011 at 9:31 PM
aisyahfarzana said...: Terima kAsih sebab tutorial ni menjadi. Sebenarnye, Aisyah tak pakai kod yang ni http://wanhazel.blogspot.com/2011/05/tutorial-add-ruang-gadget-atas-header.html. Aisyah cume pakai kod yang ni (Tutorial letak gadget/animation/dll dalam Header dan Tutorial letak/susun menu tab di header). Aisyah letak kod tu kat Sidebar.
Terima Kasih.. :); December 1, 2011 at 2:00 PM
Wan_hazel said...: sama2..peace; December 1, 2011 at 10:32 PM
Nanaloveyou said...: wan, tolong.. kenapa tak jadi.. teringin sangat nak letak menu tab dekat header.. tapi tak jadi..huwaaa !; January 31, 2012 at 6:39 PM
Wan_hazel said...: erk..dah follow semua step ke??; January 31, 2012 at 8:36 PM
Akeedlalala said...: tenkiu,dah cbe.. :); May 13, 2012 at 10:54 AM
anshmnf said...: Thanks for the tutorial :); January 20, 2013 at 10:45 AM

Tuesday, September 20, 2011

Tutorial letak/susun menu tab di header

29 comments: