Membuat Menu Navigasi Blog Ala Hompimpa

Tabel Konten
  1. Lanjut ke langkah berikutnya: 
  2. Penyesuaian dan Pemahaman lebih Lanjut 

Menu Navigasi Sederhana

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.

9 Komentar

  • Unknown

    Trimakasih yah atas tutorialnya,, sangat bermanfaat sekali,, saya uda coba dan berhasil,, makasihh,,

  • Taufik Nurrohman

    @Tha Zha: Sama-sama..

  • Unknown

    tutorial yang menarik :)

  • J-Ris-Man

    keren keren mas tutorialnya samspe saya betah di blog mas yang ini

  • Dewi Astari

    Itu model-model menu navigasinya yang pertama ada nggak ? Please kasih HTMLnya ya . Makasih postingannya bagus :)

  • Unknown

    thanks gan tuttorialnya,,
    membantu bangets,,,

  • Unknown

    Assalamu'alaikum...
    Di blog saya http://www.berislamyuk.web.id/ bagian sub menu ko gak bisa ya, padahal di templatenya ada tuh gan, bagaimana caranya...

    terima kasih

  • Unknown

    menu yg selama ini ane cari".. efek fade bener" keren gan.
    thanx. saya mau nyoba k blog ane. thanx

  • Unknown

    kang, gimana caranya menunya di samping header dan di taruh di bagian atas? contohnya begini kang...

Komentar telah ditutup.