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.


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.

Via : Isnaini