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


Tuesday, September 20, 2011

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




<div style='; position:absolute; top: 65px; left:207px;'>


<a href="LINK MENU KORANG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','http://2.bp.blogspot.com/-solNtAqb00k/TnfvOQMrxII/AAAAAAAAINk/nCpx280yrzI/s1600/1.png',1)"><img src="http://1.bp.blogspot.com/-vYM538KCT0k/TnfvVxmIDDI/AAAAAAAAINs/F04K3aOhb_Q/s1600/2.png" alt="Home" name="Home" width="110" height="80" border="0" /></a>


</div>





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.



<div class='clear'></div></div>





So selesai..


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


.




30 comments:

nuyui a.k.a miss NUSHA said...

wah2.. cam kenal blog tu..

tgkla sape designnya kan..

tq yer wan..

tenang skit dengan template baru ni =)

Wan_hazel said...

hahaha..a ah lah kan macma kenal je..hehehe...terima kasih jugak taw koz suka template tu

cik wanie Lovela (CWL) said...

kawan yg dilupakan singgah sini

Wan_hazel said...

CWL..wan tak lupa lah....

Dunia Cik Maia said...

wahhhh pening sudaaa

cik gurlzanne said...

comell :))

Wan_hazel said...

dunia cik maia

hahaha..pening dah..

Wan_hazel said...

cik gurlzanne

tengs taw

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

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

Cik Tina 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. :(

AL-AINA said...

tak keluar langsung header nyer

Cik Bulat said...

wan, ahaks.. thanks.. CB follow this tutorial.. first time buat header yang button menu bar kat header . nice tutorial XD

Wan_hazel said...

hehehe...welkam VB...n tengs jugak..

Wan_hazel said...

al aina.

aii...camne tak kuar tu??

Wan_hazel said...

Cik Tina

mesti kod tu salah..

mujahidah solehah 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 =,=

Wan_hazel said...

mujahidah solehah

pelik jugak..koding salah kot...dah add gadget atas header?

mujahidah solehah said...

tatau.. sya just copy cooding wan 2 ja..

add gadget ats header pun suda

Wan_hazel said...

law copy mesti boleh....mungkin ada salah kod tu

mujahidah solehah 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?? =,=

Wan_hazel said...

pelik betul..septutnya boleh je...

mujahidah solehah said...

aduii.. ye eaa...

Wan_hazel said...

hehehe

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.. :)

Wan_hazel said...

sama2..peace

Nanal0vey0u said...

wan, tolong.. kenapa tak jadi.. teringin sangat nak letak menu tab dekat header.. tapi tak jadi..huwaaa !

Wan_hazel said...

erk..dah follow semua step ke??

Akeedlalala said...

tenkiu,dah cbe.. :)

Nurul Anisah said...

Thanks for the tutorial :)