Cara Membuat Menu Navigasi Keren Pada Blog 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/AVvXsEhQnPngvCb-TxstA31tXo8-ACTTaDoPrgfsJS-fngTqcpq3ruvN0a9cd6f_cKaCTBq7LOieq95_d3c8fwJGGuRfWF8I23087FN91j7aGo4PfUbc60oT7jo3W4_sIXSR-xqBTMyArEOxoZul/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/AVvXsEi6XEgZzGCqRV5mTMuferajD-YgLazUzJUW-IDa61BWc8qAhajHENRjvewMzcmm-ZdYjslr8Ddggrs6vYzzreVce5IHciC2kTlAVuzoaYRCZocIThY5tfRsWQn3pIWDl4HbKT4KEMXaZdJK/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><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.