Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Membuat Menu Navigasi Blog Ala Hompimpa

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.

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 9 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!