Membuat Menu Navigasi Blog Ala Hompimpa

Pada suatu hari Saya mencoba iseng membuat model-model menu navigasi, hingga akhirnya inilah yang Saya dapatkan (lihat demonya di sini). Saya rasa, desain menu navigasi Saya yang satu ini sudah cukup ganteng. Bagaimana menurut kalian?

Jika kalian berminat membuat menu navigasi seperti tampak di atas, maka ikutilah jalan kebenaran Saya ini:

• Masuk ke tab Rancangan, kemudian pilih Edit HTML
• Nah, setelah itu salinlah kode ini, kemudian letakkan di atas kode ]]></b:skin>

#hompinav              {font:normal 0.9em Trebuchet MS,Arial,Sans-Serif;margin:0 0 50px;}
#hompinav ul           {list-style-type:none;margin:0;padding:0;height:50px;}
#hompinav li a         {display:inline;margin:0 2px;float:left;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;box-shadow:0 2px 3px #999;-moz-box-shadow:0 2px 3px #999;-webkit-box-shadow:0 2px 3px #999;}
#hompinav li a:link,
#hompinav li a:visited {font-weight:bold;color:#FFFFFF;background-color:#335577;border:2px outset #123;padding:5px 15px;text-decoration:none;}
#hompinav li a:hover   {background-color:#882222;border:2px outset #992222;}
#hompinav li a:active  {background-color:#333;border:2px outset #000;}

• Yang tadi kita lakukan itu adalah memasang rancangan modelnya, sekarang kita tinggal meletakkan kerangka menunya. Tapi sebelum itu, kita harus tahu dulu bahwa untuk meletakkan sebuah objek dalam kode HTML, kita juga harus mengerti tentang di mana letak objek ini dan itu dalam tampilan di browser ketika kita sedang melihat dalam tampilan kode.
• Oke, untuk lebih mudahnya, Saya sudah merangkumnya beberapa agar kalian lebih mudah meletakkannya. Namun satu hal: Jangan pernah tergantung dengan ID dan CLASS sebuah elemen, karena tidak semua template mengikuti standarisasi. Sebagai contoh, elemen Header tidak selalu memiliki id='header-wrapper', tetapi terkadang juga memiliki id='top-header' atau id='ndhas-blog' (jika kalian membuat template sendiri hehe..).

Lanjut ke langkah berikutnya: 

Salinlah kode ini, kemudian letakkan di tempat yang kalian kehendaki:

<div id='hompinav'>
    <ul>
        <li><a href='#'>Beranda</a></li>
        <li><a href='#'>Profil</a></li>
        <li><a href='#'>Artikel</a></li>
        <li><a href='#'>Forum</a></li>
        <li><a href='#'>Kontak</a></li>
        <li><a href='#'>Lapor</a></li>
    </ul>
</div>

Di mana kamu meletakkan kode ini?

• 
  
  

  Untuk meletakkan menu navigasi di atas atau di bawah header, carilah dulu baris kode yang tampak kurang lebih seperti ini:

  
  

  <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1'>
          <b:widget id='Header1' locked='true' title='Hompimpa Alaihum Gambreng (Header)' type='Header'/>
      </b:section>
  </div>

  
  

  Ingat, jangan terfokus pada ID dan CLASS, tetapi fokuslah pada type='header' dan judul blog (dalam hal ini: title='Hompimpa Alaihum Gambreng'). Nah, dari situ tarik pandangan matamu ke arah atas dan bawah sampai menemukan elemen <div> terluar. Di situlah batas akhir wilayah kekuasaan dari sebuah HEADER.

  
  

  Sederhananya, untuk meletakkan menu navigasi di atas header, letakkan kode yang baru saja kamu salin tadi di atas <div id='header-wrapper'>. Sedangkan jika ingin meletakkannya di bawah header, letakkan di bawah kode </div>

  
  
• 
  
  

  Untuk meletakkan menu navigasi di atas wilayah posting, carilah dulu baris kode yang kurang lebih tampak seperti ini:

  
  

  <div id='main-wrapper'>
      <b:section class='main' id='main' showaddelement='no'>
          <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
      </b:section>
  </div>

  
  

  Nah, letakkan kode yang kamu salin tadi di bawah <div id='main-wrapper'>

  
  
• Sekarang coba klik Pratinjau. Jika sudah puas, tinggal kita simpan templatemu, lalu masuk ke tahap penyesuaian dan pemahaman lebih lanjut.

Penyesuaian dan Pemahaman lebih Lanjut 

• 
  
  

  Setiap unit menu didefinisikan sebagai:

  
  

  <li><a href='#'>Nama Menu</a></li>

  
  

  Kamu bisa dengan mudah melihat nama menu yang akan tampil nantinya dengan melihat teks di dalam wilayah kekuasaan <a href='#'>teks...?</a>

  
  
• Oleh karena itu:
  (Sebagai contoh) untuk membuat menu Beranda, gantilah simbol # dengan URL homepage blogmu, lalu gantilah Nama Menu menjadi Beranda sehingga menjadi seperti ini:
  <li><a href='http://www.latitudu.co.cc'>Beranda</a></li>
• Begitu saja caranya. Titik.