Cara Membuat Menu Navigasi Keren Pada Blog

Cara Membuat Menu Navigasi Keren Pada Blog adalah postingan mengedit blog Jona Rendra yang lain. Menu Navigasi atau menu horizontal merupakan widget yang sangat penting keberadaannya di dalam blog. Menu navigasi akan mempermudah pengunjung untuk menavigasi blog anda. Yang kali ini saya share adalah Menu Navigasi Tampilan Keren dan elegan. Terdapat kombinasi tombol Inset dan Outset membuat blog yang berisi menu ini kelihatan profesional.

Cara Membuat Menu Navigasi Keren Pada Blog

Seperti yang anda lihat pada gambar diatas, begitulah desain dari menu horizontal yang akan saya berikan. Kalau dilihat dari gambarnya saja pasti kurang menarik, oleh karena itu, langsung saja pasang widgetnya di blog anda.

Cara Membuat Menu Navigasi Keren Pada Blog

1. Login ke blogger, pada dashboard pilih blog lalu masuk ke template
2. Klik Edit HTML dan letakkan CSS berikut ini di atas kode ]]></b:skin> atau </style>
.jona-menu-wrap{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAKDvs0KJW-GG-dvwH7l6Qo6iOd0t7NNCw0TaOY3v343SZVSb0KfgiXVBgFfCySg4PDD_NpTG5J0gAKQ0PUrDUSviwb0ZaDLZLdctzjbVxj4oKj-htUAtztLrSa1yRMtSZuq451VUwYukC/s1600/menuku.png) repeat-x top;height:54px;width:100%;}
.jona-menu{font:normal 12px Arial;line-height:normal;width:960px;text-transform:none;color:#f1f1f1;text-decoration:none;margin:0 auto;padding:0 auto}
.jona-menu ul{margin:0;padding:0}
.jona-menu li{list-style:none;color:#b69786;float:left;display:inline;position:relative;margin:0;padding:0}
.jona-menu li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEyDah4T7gJmPehxlM3_JtmNRpi8-P423VqSfJGFE2hyphenhyphenNrq3Q0X8xMIJC4HeA2zjGvV7RJrsPgdO5ykdEwzzuXB5JKj-nAPdlnr9g_cOJweCC5vgnr0u_uxe1jo1SHQ-3J80EaOTFskHtR/s1600/mnubg.png) repeat-x top;display:block;text-decoration:none;font-weight:700;color:#ccc;text-shadow:1px 1px 2px #111;outline:none;margin:10px 4px 8px;padding:8px 16px;border:1px solid #111}
.jona-menu li a:hover{background:#333;-moz-box-shadow: inset 2px 2px 2px #151515;-webkit-box-shadow: inset 2px 2px 2px #151515;box-shadow: inset 2px 2px 2px #151515;}
.jona-menu li ul{position:absolute;z-index:10;left:0;top:100%;height:30px;width:170px;display:none;margin:0;padding:0;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
.jona-menu li ul a{margin:0;font:12px Arial;background:#2c2c2c;border-left:none;border:none;display:block;padding:7px 10px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
.jona-menu li ul a:hover{background:#1b1b1b;color:#fff}
.jona-menu li ul li{float:none;display:block;width:auto}
.jona-menu li ul ul{top:0;left:100%}
.jona-menu li a:hover,.menuku ul li a:hover{color:#eee}
3. Setelah itu, jangan di simpan dulu. Masih ada langkah berikutnya. Cari kode <div id='header'> atau <header>
4. Kalau sudah ketemu salah satu kode diatas, copy paste kode dibawah ini dan letakkan dibawah kode <div id='header'> atau <header>
<div class='jona-menu-wrap'>
<div class='jona-menu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Site Map</a></li>
<li><a href='#'>About Me</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='#'>Link Exchange</a></li>
</ul>
</div>
</div>

Keterangan:
  • Jangan lupa mengganti kode # dengan URL menu yang dituju
  • Jika ingin mengganti bagian tulisan pada menu, silahkan diubah
  • Mau tahu lebih banyak tentang cara mengedit menu horizontal? baca di Panduan Mengedit Menu Horizontal
5. Setelah di kustomisasikan, baru terakhir klik Simpan Template.

Cara diatas adalah cara memasukkan menu dengan edit html. Sebenarnya ada cara lain. Yaitu dengan Tambah Gadget, HTML/Javascript. Tetapi, anda perlu lagi untuk menambah satu kolom dibawah header. Dan menggabungkan CSS diatas dengan kode HTML link menu nya. Kalau CSS, diapit dengan <style>CSS</style> setelah itu baru HTML. Seperti yang telah dijelaskan pada Pengetian HTML dan CSS serta Tutorial pemakaiannya.

Itulah artikel dari Jona Rendra yang berjudul Cara Membuat Menu Navigasi Keren Pada Blog, semoga dapat bermanfaat untuk anda. Apabila ada pertanyaan mengenai tutorial diatas, silahkan poskan melalui komentar.

29 comments for "Cara Membuat Menu Navigasi Keren Pada Blog"

  1. menu navigasi yang bagus (h)
    tapi saya masih tetep pakai yang lama 8-)

    ReplyDelete
  2. keren tricknya, kapan" saya coba ya !!

    ReplyDelete
    Replies
    1. dicoba sekarang juga boleh :D
      makasih sudah berkunjung

      Delete
  3. bener bener keren navigasinya :)
    sip thanks ya sharenya

    comeback

    ReplyDelete
  4. keren kayaknya sob, ypi gak ada semo nya.. :D

    ReplyDelete
    Replies
    1. oh iya maaf ya, saya gak berikan tombol DEMO nya
      tapi, kalau anda ingin lihat, coba deh pakai HTML Editor yang ada di menu tool, setelah itu copas kode yang sudah saya kasih

      Delete
  5. izin ikut mempelajari script nya pak. tp kalo di pasang di blog wopress apa bisa ya?

    ReplyDelete
    Replies
    1. waduh, kalau masalah wordpress saya kurang tahu
      coba cari ke sumber yang lain
      soalnya ini untuk blogger :)

      Delete
  6. kaka ko ga ada perubahan ya ? maksunya yang tanda "#" di ganti dengan URL itu gimana ?
    bales plis.. :)

    ReplyDelete
    Replies
    1. tanda # diganti pakai URL / link seperti contoh saya mau buat menu dengan anchor text About Me dengan link http://jonarendra.blogspot.com/p/tentang-saya.html. Jadi, kode html nya seperti ini
      <a href='http://jonarendra.blogspot.com'>About Me</a>

      Delete
  7. Gan Npa sya erro tertlis gini ...
    Kesalahan saat mengurai XML, baris 1122, kolom 6: The element type "li" must be terminated by the matching end-tag

    pliss help ......

    ReplyDelete
  8. jona tolong bsa gk klo kirim screenshot tutorial membuat sub menu..
    ke afiq4869@gmail.com

    thx

    ReplyDelete
    Replies
    1. cara membuat sub menu itu mudah. menu yang horizontal kodenya begini
      <li><a href='/'>menu</a></li>
      kalau ingin membuat cabang pasang saja kode itu berulang kali dibawahnya, contoh seperti ini
      <li><a href='/'>menu</a></li>
      <li><a href='/'>Sub menu 1</a></li>
      <li><a href='/'>Sub menu 2</a></li>
      <li><a href='/'>Sub menu 3</a></li>

      Supaya 'Sub menu 1,2,3' jadi cabang dari 'menu', hapus kode <li> dari kode HTML 'menu', lalu dibawahnya tulis <ul>. Kode HTML jadi begini:
      <li><a href='#'>menu</a>
      <ul>
      <li><a href='#'>Sub menu 1</a></li>
      <li><a href='#'>Sub menu 2</a></li>
      <li><a href='#'>Sub menu 3</a></li>

      Perhatikan kode <ul> dan <li> belum ditutup! Sekarang kita tambahkan kode penutupnya. Sehingga kode HTML menu menjadi

      <li><a href='#'>menu</a>
      <ul>
      <li><a href='#'>Sub menu 1</a></li>
      <li><a href='#'>Sub menu 2</a></li>
      <li><a href='#'>Sub menu 3</a></li>
      </ul>
      </li>
      sekarang link 'menu' jika di sentuh kursor akan muncul sub menu nya (apabila sudah dibuat css sub menu)

      Delete
  9. Kalau membuat menu horizontal melalui gadget html/script dari menu tata letak menggunakan kode-kode diatas bisa ngga gan? thx

    ReplyDelete
    Replies
    1. tentu bisa, tapi harus disusun terlebih dahulu.
      css harus dibungkus kode &ltstyle&gt, lalu dibawahnya taruh html menu yang ada

      Delete
  10. keren bro.. mantap, terimakasih banyak

    ReplyDelete
  11. Replies
    1. belom paham di bagian mananya?
      coba dibaca ulang tutorialnya

      Delete
  12. Menu Navigasinya cukup keren, namun bagaimana cara membuatnya agar menjadi responsive ?

    ReplyDelete

Post a Comment

Berkomentarlah dengan baik dan benar, dilarang SPAM!
Tata Tertib Berkomentar