Cara Mengatur Link pada Sub Pages

Mengatur link pada menu navbar mungkin mudah bagi mereka yang sudah mengenal kode HTML tetapi bagi mereka yang awam akan kode HTML sangatlah rumit dikarenakan banyaknya kode kode html seperti <ul> ------ </ul> dan <li> ------ </li> semuanya itu mungkin rumit bagi mereka yang tidak mengenalnya.

Sebelum kita membahasnya kita ketahui terlebih dahulu bahwa setiap sub page akan berawalan <ul> dan berakhir pada </ul>.

Dan pada link pada menu page, sub page, sub sub page dan sub sub sub page akan berawalan <li> dan berakhir pada </li>

Berikut di bawah ini adalah ilustrasinya :

<div id='NavbarMenu'>
  <ul id='nav'>
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>

    <li><a href='#'>Page</a>
      <ul>                                 /* ------> awal menu pada sub page */
        <li><a href='#'>Sub Page #1&#160;&#160;&#160;&#160;&#187;</a>
          <ul>                             /* ------> awal menu pada sub sub page */
            <li><a href='#'>Sub Sub Page #1&#160;&#160;&#160;&#160;&#187;</a>
              <ul>                         /* ------> awal menu pada sub sub sub page */
                <li><a href='#'>Sub Sub Sub Page #1</a></li>
                <li><a href='#'>Sub Sub Sub Page #2</a></li>
              </ul>                         /* ------> akhir dari menu pada sub sub sub page */
            </li>
            <li><a href='#'>Sub Sub Page #2</a></li>
            <li><a href='#'>Sub Sub Page #3</a></li>
          </ul>                             /* ------> akhir menu pada sub sub page */
        </li>
        <li><a href='#'>Sub Page #2</a></li>
        <li><a href='#'>Sub Page #3</a></li>
        <li><a href='#'>Sub Page #4</a></li>
        <li><a href='#'>Sub Page #5</a></li>
      </ul>                                 /* ------> akhir menu pada sub page */
    </li>

    <li><a href='#'>About Me</a></li>
  </ul>
</div>

Ket :

• Tulisan # Ganti dengan alamat link. diikuti nama link tersebut yaitu dengan mengganti tulisan sub page, sub sub page dan sub sub sub page yang ada di sampingnya.


• Kode "&#160;" adalah "spasi" untuk membatasi jarak dengan kode "&#187;" yang berarti tampilan "»" jadi pada kode "Sub Sub Page #1&#160;&#160;&#160;&#160;&#187;" nantinya akan tampil menjadi "Sub Sub Page #1    »"


• Tulisan NavbarMenu dan nav adalah pemanggil dari kode css pada template. jadi sesuaikan nama tersebut dengan kode css yang anda miliki pada template anda.


• Jika belum mempunyai kode css tersebut mungkin anda harus membuatnya terlebih dahulu sesuai ukuran template anda. tetapi saran dari Trik Tips Tutorial agar anda memakai template yang sudah disertai sub pages pada templatenya kemudian anda tinggal mengedit linknya seperti yang diterangkan di atas.