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.
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.
menu navigasi yang bagus (h)
ReplyDeletetapi saya masih tetep pakai yang lama 8-)
haha, memang benar benar bagu deh |o|
Deletekeren tricknya, kapan" saya coba ya !!
ReplyDeletedicoba sekarang juga boleh :D
Deletemakasih sudah berkunjung
bener bener keren navigasinya :)
ReplyDeletesip thanks ya sharenya
comeback
haha, betul
Deletemakasih juga atas kunjungannya ^_^
mantab mas.. makasih sharenya
ReplyDeleteoke
Deletemakasih juga atas kunjungannya
keren kayaknya sob, ypi gak ada semo nya.. :D
ReplyDeleteoh iya maaf ya, saya gak berikan tombol DEMO nya
Deletetapi, kalau anda ingin lihat, coba deh pakai HTML Editor yang ada di menu tool, setelah itu copas kode yang sudah saya kasih
izin ikut mempelajari script nya pak. tp kalo di pasang di blog wopress apa bisa ya?
ReplyDeletewaduh, kalau masalah wordpress saya kurang tahu
Deletecoba cari ke sumber yang lain
soalnya ini untuk blogger :)
Keren mas..
ReplyDeletekaka ko ga ada perubahan ya ? maksunya yang tanda "#" di ganti dengan URL itu gimana ?
ReplyDeletebales plis.. :)
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
Delete<a href='http://jonarendra.blogspot.com'>About Me</a>
Gan Npa sya erro tertlis gini ...
ReplyDeleteKesalahan saat mengurai XML, baris 1122, kolom 6: The element type "li" must be terminated by the matching end-tag
pliss help ......
itu berarti ada kode <li> yang tidak ditutup dengan kode </li>.
Deletecoba perhatikan kode nya
Tnks Gan dah jdi .....
Deletedan bleh mnta tlong lgi gan nie mnu bleh gak buat sub menu ....
boleh pastinya
Deletecranya gan ....?
Deletesilahkan baca di Panduan Mengedit Menu Horizontal
Deletejona tolong bsa gk klo kirim screenshot tutorial membuat sub menu..
ReplyDeleteke afiq4869@gmail.com
thx
cara membuat sub menu itu mudah. menu yang horizontal kodenya begini
Delete<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)
Kalau membuat menu horizontal melalui gadget html/script dari menu tata letak menggunakan kode-kode diatas bisa ngga gan? thx
ReplyDeletetentu bisa, tapi harus disusun terlebih dahulu.
Deletecss harus dibungkus kode <style>, lalu dibawahnya taruh html menu yang ada
keren bro.. mantap, terimakasih banyak
ReplyDeletemasih belom paham bang :'(
ReplyDeletebelom paham di bagian mananya?
Deletecoba dibaca ulang tutorialnya
Menu Navigasinya cukup keren, namun bagaimana cara membuatnya agar menjadi responsive ?
ReplyDelete