Pages

Wednesday, September 16, 2009

Membuat Menu Dan Navigation/Navigasi


Semalam seorang penggunjung laman blog ini saudari eryati ada mengajukan soalan, tentang cara -cara membuat Menu Dan Navigasi seperti yang terdapat dalam laman blog ini, sebenarnya kita boleh dapatkan menu navigasi ini,dengan menukar template blog yang dah ada menu navigasi yang cantik-cantik...itu adalah cara yang senang...di sini, saya akan ceritakan/ajarkan cara-cara nak buat menu navigasi tersebut, bagi template yang tiada di sertakan menu navigasi, baiklah ayuh kita mulakan :-

1. Login - Layout - Page Element - Add A Gadget - HTML / Javascript. - Masukkan kod HTML di bawah ini.


<ul id="main-nav">
<li><a href="/link home" title="HOME">Home</a></li>
<li><a href="/link download" title="DOWNLOAD">Download</a></li>
<li><a href="/link guestbook" title="BUKU TAMU">Guest book</a></li>
<li><a href="/link about" title="ABOUT US">About</a></li>
</ul>

p/s: Letakkan di atas kotak catatan blog/blog post.

** Anda boleh menukar link dan title yang berwarna merah dengan link dan title anda sendiri


2. Masukkan Kod Css kedalam Layout pula,

---> Login-Layout-Edit Html

Kemudian carikan ]]></b:skin> dan letakkan kod dibawah ini pada ruangan atas kod ]]></b:skin>/ sebelum kod ]]></b:skin>


ul#main-nav {font-family:helvetica,arial,sans-serif;margin:0;padding:0;float:left;border-bottom:0.1em solid #04e;width:100%;}
ul#main-nav li {margin:0;padding:0;list-style:none;float:left;margin:0 0.3em 0 0;}
ul#main-nav li a {font-weight:bold;text-decoration:none;display:block;padding:0.3em;border-bottom:0.4em solid white;color:black;background:#fff;}
ul#main-nav li a:hover {border-bottom:0.4em solid #04e;color:#04e;}

3. Akhir sekali Save Template...Siap...

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...