Jan 12, 2009

Membuat Menu Navigasi Online


Blogspot tidak menyediakan perkhidmatan untuk membuat halaman menu pada blognya. Justeru, ramai yang memilih untuk meletakkan halaman tentang penulis, hubungi penulis malah pautan rakan² di postingan masing². Selepas itu, barulah halaman² tersebut dipautkan sebagai menu utama. Bagi bloggers yang ingin membuat menu sendiri, anda boleh menggunakan servis percuma yang ditawarkan oleh sebuah web. kenyit


Penulis akan membantu anda untuk membuat menu ini.

1. Anda masuk ke laman web List O Matic.

2. Initial setup
- Pilih jumlah link yang anda mahu.

3. Enter the link details in the table below
- Penulis akan bagi contoh untuk mengisi ruang² kosong berdasarkan blog penulis.

* Link Text - Home
* Link Title - Utama
* Link Destination (href) - http://eriyzaqistina.blogspot.com

Anda boleh mengisinya mengikut kemahuan anda sendiri.

4. This is your basic, unformatted list
- Sekarang pilih stail menu yang anda suka.

* Vertical Styles untuk menu menegak.
* Horizontal Styles untuk menu melintang.

Penulis menyarankan anda memilih Vertical Styles.

5. How to identify and style the menu
- Pilih salah satu.

6. Your list-based navigation is complete!
- Anda akan diberi samada satu atau dua kod berdasarkan pilihan anda di nombor 5.
-Tugas anda seterusnya ialah untuk mengisi kod HTML dan kod CSS ke dalam blog.

7. Cara untuk mengisi kod HTML adalah seperti berikut. Penulis akan memberi contoh berdasarkan kod yang penulis buat. Anda cuma perlu menukarnya dengan kod HTML anda sendiri.

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

<div id="navcontainer">
<ul id="navlist">
<li><a href="http://eriyzaqistina.blogspot.com/" title="Utama">Home</a></li>
<li><a href="http://eriyzaqistina.blogspot.com/2007/07/tentang-seseorang.html" title="Penulis">About Me</a></li>
<li><a href="http://eriyzaqistina.blogspot.com/2007/10/contact.html" title="Hubungi">Contact</a></li>
<li><a href="http://eriyzaqistina.blogspot.com/2007/10/pautan.html" title="Rakan">Friends</a></li>
<li><a href="http://eriyzaqistina.blogspot.com/search/label/Tutorial" title="Tutorial">Tutorials</a></li>
</ul>
</div>

Tarik saja menu tersebut ke tempat yang anda inginkan.

8. Tugas anda sekarang ialah mengisi kod CSS ke dalam layout pula. Penulis juga akan memberi contoh berdasarkan kod CSS penulis.

- Login - Layout - Edit HTML.
- Cari ]]></b:skin>. Tampal kod CSS ini sebelum ]]></b:skin>.

/* Eric Myer's Simple List Separators
http://www.meyerweb.com/eric/talks/2003/commug/commug.html */
#navlist
{
padding-left: 0;
margin-left: 0;
border-bottom: 1px solid gray;
width: 200px;
}

#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid gray;
}

#navlist li a { text-decoration: none; }

9. Save template. Siap.

Aduh! Penat jari buat tutorial ini. Penulis berharap ianya bermanfaat buat anda. Lain kali penulis akan kongsi menu navigasi yang lain pula. senyumkenyit

Via : Isnaini

8 Comment

Adry Wed Jan 14, 07:25:00 AM

owh... boleh buat rupanya... thanks for the info...

Eriyza Wed Jan 14, 09:58:00 AM

Adry : Sama². :)

azlishukri Wed Jan 14, 02:22:00 PM

bagus pengajaran ini salam singgah

.:GaDiS KaLiS PeLuRu:. Wed Jan 14, 08:56:00 PM

hhuhuh napa da susah nk shout sb..x reti n x boleh

Eriyza Thu Jan 15, 02:09:00 PM

Muhamad Azli Shukri : Wsalam. Tq. :)

Gadis Kalis Peluru : Cuba ikut step by step. :)

Eriyza Fri Apr 10, 10:31:00 PM

Anonymous : You're welcome. ;)

azora Sat Jan 02, 03:23:00 AM

salam...
pertama kali comment..terima kasih ye..saya memang cari pasal navigation ni..thank you again..murah rezeki awak... =))

Eriyza Sat Jan 02, 10:55:00 AM

azora : Wsalam. No hal. Sama².

Post a Comment

Gunakan tatabahasa yang betul sewaktu menulis komentar agar mudah difahami oleh penulis. Terima kasih. :-)

Sila ambil perhatian perkara² berikut :-

1. Tinggalkan nama dan url blog atau laman web anda.
2. HTML tag seperti <b>, <i>, <a> boleh digunakan.
3. Sila berhemah di dalam berbahasa.