Dalam sebuah halaman website atau blog yang pernah kita kunjungi, sering kali kita menemui sebuah deretan yang berupa daftar yang berfungsi untuk mengarahkan dan memudahkan pengunjung website tersebut dalam menjelajahi isi website dan mencari apa yang dibutuhkan oleh pengunjung blog tersebut, atau bisa juga deretan tersebut berisi tentang akun media sosial dan cara untuk menghubungi pemilik website. Nah deretan daftar inilah yang disebut Menu Navigasi.
Menurut saya pribadi, "Menu Navigasi" merupakan satu elemen yang harus ada pada sebuah halaman website atau blog.
Menu Navigasi sangat penting, karena dengan adanya Menu Navigasi pengujung yang sedang berada pada website atau blog kita tidak akan tersesat dan dapat dengan mudah untuk berpindah atau menemukan dan menjelajahi setiap konten yang kita sajikan. Karena pada dasarnya Menu Navigasi bersisi link - link penting yang dikelompokkan pada setiap item dari menu terebut.
Selain mempermudah pengunjung untuk menjelajahi setiap konten yang kita sajikan, dengan adanya Menu Navigasi maka website atau blog yang memasang Menu Navigasi akan terkesan lebih profesional karena bisa dibilang serius untuk memberikan yang terbaik kepada setiap pengunjungnya.
Satu lagi, bila kita memasang Menu Navigasi pada website atau blog kita maka Google senang dengan hal itu, ya itulah, karena pada prinsipnya Google senang terhadap sebuah website atau blog yang memudahkan setiap pengunjungnya untuk mengekplorasi seluruh konten yang terdapat pada sebuah website atau blog.
Demikian tadi sedikit uneg - uneg saya mengenai "Menu Navigasi". Sekarang mari kita lanjutkan topik utama kita tentang "Membuat Menu Navigasi".
Sobat, sebelum pembahasan kita berlanjut, alangkah baiknya sobat memahami runtutan dari tutorial ini.
Jadi tutorial mengenai "Membuat Menu Navigasi" ini merupakan tutorial bagian #3 dari seluruh rangkaian tutorial mengenai "Membuat Tema Blogger Dari Nol - 100% Bisa".
Adapun runtutan tutorial "Membuat Tema Blogger Dari Nol - 100% Bisa" yang saya sajikan dalam blog ini adalah sebagai berikut:
- Bagian #1
Membuat Tema Blogger Dari Nol - 100% Bisa (Tampilan Dasar) #1.
Membuat Tema Blogger Dari Nol - 100% Bisa (Tampilan Dasar) #2. - Bagian #2
Merapikan Tampilan Dasar Blog. - Bagian #3
Membuat Menu Navigasi. (Sobat berada di sini) - Bagian #4
Membuat Menu Drop Down. - Bagian #5
Membuat Blog Fast Loading (Page Speed Insights). - Bagian #6
Membuat Widget Untuk Banner Pada Header Sebelah Kanan. - Bagian #7
Membuat Widget Footer Tiga Kolom. - Bagian #8
Membuat Blog Resposive (Mobile Friendly Test) & SEO Friendly. - Bagian #9
Merapikan Tampilan Layout.
Semoga bisa dipahami.
Membuat Menu Navigasi
Sobat, pada Bagian #1 dan Bagian #2 kemarin kita telah membuat sebuah tema blog dasar dengan tampilan akhir seperti gambar di bawah ini:
Dari gambar di atas bisa kita lihat bahwa tema dasar yang telah kita buat belum ada "Menu Navigasi", jadi rasanya seperti ada yang kurang. Ya maklum, namanya saja masih dasar, jadi memang masih banyak yang harus kita perbaiki dan lengkapi seperti "Menu Navigasi" dan mungkin juga "Widget pada Footer".
Untuk pekerjaan kita kali ini adalah membuat "Menu Navigasi".
Untuk membuat "Menu Navigasi" pertama - tama silahkan tambahkan kode HTML berikut ini:
<nav id='menu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
</ul>
</nav>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
</ul>
</nav>
Letakkan tepat di atas kode <div id='bungkus-isi'> (bila sobat memiliki tema standar letakkan tepat di atas <div id='content-wrapper'> atau yang mirip) kemudian klik "Simpan tema".
Setelah kode menu navigasi berhasil di simpan, silahkan sobat lihat dahulu tampilan blog sebelum kita tambahkan css untuk menu navigasi yang barusan kita tambahkan.
Tampilan "Menu Navigasi" sebelum kita rapikan menggunakan css terlihat seperti gambar di bawah ini:
Sekarang mari kita rapikan tampilan "Menu Navigasi" yang barusan kita buat.
Pertama, saya ingin menghilangkan dahulu "titik hitam" yang terdapat di sebelah kiri setiap menu. Caranya tambahkan kode css berikut ini:
#menu ul, #menu li {
margin: 0;
padding:0;
list-style:none
}Letakkan tepat di atas kode ]]></b:skin> kemudian "Simpan tema".
Hasilnya akan terlihat seperti ini:
Kedua, merubah tata letaknya agar tidak terlihat menurun tapi berjajar ke kanan dan merubah hurufnya agar semua menjadi huruf kapital (besar), maka tambahkan kode css ini:
#menu ul {
height: 45px;
width: 100%;
}
#menu li {
float: left;
text-transform: uppercase;
}Letakkan tepat di atas kode ]]></b:skin> kemudian "Simpan tema".
Hasilnya akan terlihat seperti ini:
Ketiga, untuk merubah warna background pada menu navigasi dan memberi garis putih pada sisi atas dan bawahnya. Maka tambahkan kode css ini:
#menu {
background: black;
color: white;
height: 40px;
box-shadow: 1px 2px 9px darkgrey;
border-top: 2px solid white;
border-bottom: 1px solid white;
}Letakkan tepat di atas kode ]]></b:skin> kemudian "Simpan tema".
Hasilnya akan terlihat seperti ini:
Keempat, agar menu terlihat di tengah - tengah bukan di bawah dan warna backgroud berubah saat disorot menggunakan mouse tambahkan css ini:
#menu a {
display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: none;
color: white;
}
#menu li a:hover {
color: white;
background: grey;
}*14px adalah jarak antara item menu satu dengan yang lainnya.
Letakkan tepat di atas kode ]]></b:skin> kemudian "Simpan tema".
Jadi untuk keseluruhan kode css yang kita tambahkan tadi adalah seperti ini:
#menu {
background: black;
color: white;
height: 40px;
box-shadow: 1px 2px 9px darkgrey;
border-top: 2px solid white;
border-bottom: 1px solid white;
}
#menu ul, #menu li {
margin:0;
padding:0;
list-style:none
}
#menu ul {
height: 45px;
width: 100%
}
#menu li {
float: left;
text-transform: uppercase;
}
#menu a {
display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: none;
color: white;
}
#menu li a:hover {
color: white;
background: grey;
}Dan hasil akhir dari tampilan "Menu Navigasi" setelah kita tambahkan seluruh kode css di atas adalah seperti ini:
Demikian cara membuat "Menu Navigasi" pada blog, untuk warna dan ukuran huruf atau jarak setiap menu silahkan sobat sesuaikan dengan selera sobat masing - masing.
Dalam menentukan jarak setiap item menu hanya menggunakan nilai pada margin dan padding saja. Sedangkan nilai warna yang saya gunakan di atas menggunakan "nama warna" sperti white dan lain - lain. Sobat bisa menggantinya dengan nama warna yang lain atau menggunakan kode HEX. Untuk memilih warna yang menjadi favorit sobat bisa sobat lihat daftarnya di sini.
Semoga apa yang saya sampaikan di atas bisa sobat pahami, bila ada yang kurang tepat atau masih ada yang keliru saya harap sobat sekalian tidak sungkan - sungkan untuk memberi koreksi dan masukan.
Saran, komentar dan share dari sobat sangat berarti bagi blog ini. Akhir kata "Semoga bermanfaat dan sukse selalu untuk kita semua". Aamiin...
