Friday, 23 August 2013

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(http://3.bp.blogspot.com/-faP6Fn9WqLo/UPkslzJ5PSI/AAAAAAAAJfI/pJghtOCFU3s/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(http://3.bp.blogspot.com/-C7cjkp-xQeE/UPktW40dq8I/AAAAAAAAJfQ/Brd4yRErBYA/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.

KATEGORI:
arrow_back
arrow_forward

29 komentar

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

haha, memang benar benar bagu deh |o|

keren tricknya, kapan" saya coba ya !!

dicoba sekarang juga boleh :D
makasih sudah berkunjung

bener bener keren navigasinya :)
sip thanks ya sharenya

comeback

haha, betul
makasih juga atas kunjungannya ^_^

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

oke
makasih juga atas kunjungannya

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

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

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

kaka ko ga ada perubahan ya ? maksunya yang tanda "#" di ganti dengan URL itu gimana ?
bales 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
<a href='http://jonarendra.blogspot.com'>About Me</a>

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 ......

itu berarti ada kode <li> yang tidak ditutup dengan kode </li>.
coba perhatikan kode nya

Tnks Gan dah jdi .....

dan bleh mnta tlong lgi gan nie mnu bleh gak buat sub menu ....

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

thx

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)

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

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

keren bro.. mantap, terimakasih banyak

belom paham di bagian mananya?
coba dibaca ulang tutorialnya

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

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