Menu navigasi horizontal biasa digunakan pada situs web atau blog. Dilihat dari peranannya menu horizontal sangat berguna bagi pemilik blog maupun pengunjung guna menavigasi ke halaman yang diinginkan.
Memasang menu navigasi ini biasa diletakkan di bawah maupun di atas header. Anda bisa memasukkan link secara horizontal atau berderet kesamping. Biasanya link yang diletakkan pada menu horizontal ini adalah menu yang dianggap penting, karena pengunjung blog ketika pertama kali membuka halaman secara tidak langsung akan melihat menu ini.
Menu ini sangat mudah diaplikasikan pada template blog, karena cara membuat menu navigasi horizontal ini menggunakan css biasa yang tidak akan membebani loading blog Anda. Menu horizontal yang akan kita buat adalah menu navigasi seperti yang ada pada blog ini, atau Anda bisa lihat contoh gambarnya di bawah ini:
Cara Membuat Menu Navigasi Pada Blog
1. Login ke blog Anda
2. Pilih template > click edit template.
3. Cari kode ]]></b:skin> atau </style>
4. Copy-paste code CSS berikut ini tepat diatasnya :
#252525 : Warna background menu navigasi
#eee : Warna font atau tulisan menu navigasi
#666 : Warna border samping kanan tulisan
#fff : Warna font atau tulisan saat di sorot kursor
Warna di atas bisa Anda ganti sesuai warna kesukaan Anda. Untuk melihat kode-kode warnanya silahkan lihat Daftar Kode Warna HTML
5. Kemudian cari kode <div id='content-wrapper'> atau <div id='outer-wrapper'> yang jelasnya kode ini letaknya tidak jauh di bawah kode <body>
#menunavigasi {float:left; background:#252525; width:auto; margin:0 auto; padding:0 auto;border-radius: 10px}
#menubar {width:100%}
#menubar,#menubar ul {list-style:none; margin:0; padding-left:10px}
#menubar a {display:block; text-decoration:none; font-size:12px; font-weight:Bold; color:#eee; border-right:1px solid #666; padding:8px 12px}
#menubar li {float:left; width:auto}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a {color:#fff}
Keterangan :#menubar {width:100%}
#menubar,#menubar ul {list-style:none; margin:0; padding-left:10px}
#menubar a {display:block; text-decoration:none; font-size:12px; font-weight:Bold; color:#eee; border-right:1px solid #666; padding:8px 12px}
#menubar li {float:left; width:auto}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a {color:#fff}
#252525 : Warna background menu navigasi
#eee : Warna font atau tulisan menu navigasi
#666 : Warna border samping kanan tulisan
#fff : Warna font atau tulisan saat di sorot kursor
Warna di atas bisa Anda ganti sesuai warna kesukaan Anda. Untuk melihat kode-kode warnanya silahkan lihat Daftar Kode Warna HTML
5. Kemudian cari kode <div id='content-wrapper'> atau <div id='outer-wrapper'> yang jelasnya kode ini letaknya tidak jauh di bawah kode <body>
Catatan : Jika kode di atas tidak di temukan, itu karena setiap pengkodean CSS untuk template berbeda-beda tapi fungsinya sama, jadi carilah kode yang tidak jauh beda dengan nama di atas.6. Copy-paste code berikut ini tepat dibawahnya :
<div id='menunavigasi'>
<ul id='menubar'>
<li><a href='http://www.tugasku4u.com'>Homepage</a></li>
<li><a href='#'>Kumpulan Tugas</a></li>
<li><a href='#'>Kumpulan Makalah</a></li>
<li><a href='#'>Tutorial Blogger</a></li>
<li><a href='#'>Tips Trick</a></li>
<li><a href='#'>Info SEO</a></li>
</ul>
<div style='clear:both;'/>
</div>
<div class='clear'/>
Keterangan:<ul id='menubar'>
<li><a href='http://www.tugasku4u.com'>Homepage</a></li>
<li><a href='#'>Kumpulan Tugas</a></li>
<li><a href='#'>Kumpulan Makalah</a></li>
<li><a href='#'>Tutorial Blogger</a></li>
<li><a href='#'>Tips Trick</a></li>
<li><a href='#'>Info SEO</a></li>
</ul>
<div style='clear:both;'/>
</div>
<div class='clear'/>
- Ganti tulisan warna merah di atas dengan alamat link atau URL milik Anda yang ingin dimasukkan dalam menu.
- Ganti tulisan warna biru dengan nama alamat link yang dimasukkan tadi.
Contoh :
Alamat link URL : misal = http://www.tugasku4u.com
Contoh :
Alamat link URL : misal = http://www.tugasku4u.com
Nama alamat link : misal = Tutorial Blogger
7. Pratinjau terlebih dahulu, jika tidak ada kesalahan silahkan simpan template Anda.
Demikian tutorial cara memasang menu navigasi pada blog, semoga tutorial ini bisa bermanfaat bagi sobat semua... Jika Anda masih ingin membaca Tutorial dan Tips Blog seperti diatas, silahkan buka DAFTAR ISI di blog ini.
Tolong bantu saya klik Tombol Vote ini...
| 6:22 PM |
28
komentar
28 komentar
Makasi gan,,, sgt bermanfaat
Balasada yang tau gak cara untuk supaya kita bisa mengisi navigasi bar .
Balasko g bisa?? malah muncul di kode html di atas blognya
BalasCoba lebih diteliti lagi penempatan kode yang kedua di atas gan...
Balasgni gan,sbagai contoh pada mnu tutorial blog milik gan,gmana caranya supaya smua yg berhubungan dengan tutorial blog itu tampil stelah mnu tersebut di klik.
Balasapa saja yg perlu di atur
tolong penjelasannya gan
thanks
Kenapa setelah di klik menu Tutorial Blog akan muncul semua postingan tentang Tutorial blog.... Itu karena link saya taruh disitu berLabel Tutorial blog gan. Label itu diberi pada saat kita membuat postingan...
BalasMisalkan saja Anda sedang membuat postingan tutorial, setelah selesai jangan lupa memberinya Label. Nahh... link label inilah yang nantinya kita taruh di kode HTML berwarna merah diatas "#"
Kalo buat url yg buat ngisii wrna biru gmna?
BalasItu untuk nama alamat link, bukan URL... :)
Balassupaya menu navigasi melebar seperti merdekadotcom bagaimana cara membuatnya, apa yang perlu ditambah? template blog saya responsive, width: 100%; gak mau melebar juga. tolong bantu aku ya, terimakasih.
BalasTemplate sobat kan sudah responsive... kenapa mau di ubah lagi, itu sudah bagus gan.
Balastapi ane gak puas gan. pusing nih utak atik gak bisa juga.
BalasCoba tanya langsung sama desainernya gan... karena saya juga masih belum terlalu paham yang begituan. :)
Balaskeren, bro....dah saya coba dan berhasil.....good job
BalasGan kalo terjadi kesalahan da sdh terlanjur disimpan di simpan template gmana ?
BalasIkuti lagi langkah di atas...terus cari kode yang sudah di simpan. hapus kode tersebut... lalu simpan kembali...
Balasgan, kalo cara ganti menubar gimana? di blog saya sudah ada menubarnya, tapi ane nggak suka tampilannya. coba cek di kunciseo*blogspot*com.
BalasUntuk menu barnya template droidpluss, silahkan tanya langsung pada desainernya sob.... :)
Balaskalo div id='content-wrapper' nya gak ketemu gimana gan ?
BalasSilahkan baca catatannya di atas gan... :)
BalasMantap kang info nya
Balasmasih bingung saya bang hhhh
BalasMantap gan,, lanjutkan
BalasSaya dah nyoba seperti petunjuk, berhasil sih tapi kok menubarnya ada di paling bawah ya? tolong dibantu..
Balascara buat label mas bro gmn tolong masukanya
Balasmakasih infonya gan, akan saya coba
BalasThank gan , work
Balasmakasih ya sobat, gambarnya dijadikan thumbnail di blog sampeyan..., salam blogger
Balasbang caranya masukan url ke link tutorial gimana aku agak gak paham jadi 2 bisa2
BalasKomentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM.