Cara Membuat Menu Navigasi Yang Responsif - Setiap blogger atau website pada umumnya memiliki menu navigasi yang terlihat di sekita header blog. Memang dalam blog harus mengandung menu dan sub menu navigasi untuk memudahkan pengunjung menemukan kategori artikel yang tersaji dalam blog.Namun untuk membuat menu navigasi harusnya yang responsif. Ada juga blog yang memiliki sub menu navigasi sehingga blog kelihatan lebih keren. Menu navigasi blog biasanya terlihat diatas header blog. Menu navigasi terbentuk karena adanya kode perintah atau disebut dengan bahasa program, Kode bahasa program dapat berupa kode CSS, HTM dan Javascript.
Pengertian Dan Fungsi Menu Navigasi
Menu navigasi adalah bagaian dari web/blog yang berisi link-link yang mengarah ke halaman lain dalam satu atau mengarah kehalaman website atau blogger lain. Biasanya menu navigasi tampil dengan rapi dan terstruktur serta berisi link-link tiap menu. Pada umumnya menu navigasi terletak diatas header
Menu navigasi adalah elemen penting yang harus ada dalam blog karena dapat membantu pengunjung untuk menemukan halaman-halaman penting sesuai dengan pengakategorian artikel. Maka tak heran setiap pemiliki blog selalu membuat navigasi blog.
Dalam blogspot.com pemasangan menu navigasi pada umumnya berdasarkan pemberian label pada artikel. atau bisa juga memasang link ke webiste lain dalam menu navigasi.
Secara defult pada saat awal membuat blog, menu navigasi pada blog tidak terdapat fitur-fitur yang menampilkan menu navigasi. Yang mungkin tampil dalam blog hannyalah halaman beranda saja.
Namun bagi anda yang menggunakan templete hasil download menu navigasi pada umunya sudah ada, tinggal merubah sesaui keinginan dan kebutuhan anda. Bagi yang menggunakan templete hasil unduhan yang telah memiliki menu navigasi maka tidak perlu lagi untuk membuat menu navigasi pada blog.
Apa Sih Fungsi Menu Navigasi?
Beberapa fungsi menu navigasi untuk blog atau website yaitu sebagai berikut :
1. Blog yang memiliki menu navigasi di nilai profesional
Dengan adanya menu navigasi yang melekat dan jelas pada blog atau website maka blog tersebut dinilai oleh profesional oleh pengunjung dan juga oleh google
2. Mudah Mendapatkan sitelink
Blog yang memiliki menu navigasi yang terstruktur dan jelas akan mudah mendapatkan sitelink. Site yang paling banyak memang hanya berada pada menu navigasi.3. Memudahkan Pengunjung untuk menemukan dan memahami pengkategorian konten dalam blog.
Dengan hanya melihat meni navigasi di blog secara sepintas pengunjung langsung memahami kategori-kategori konten yang ada dalam blog. Jadi upayakan membuat dan memasang menu navigasi yang jelas dan responsih.
Menu navigasi yang responsif mengandung arti bahwa menu navigasi tampil dengan sempurna dengan menyesuaikan dengan lebar layar kaca android jika blog di buka menggunakan perangkat android
Berikut ini adalah cara membuat menu navigasi responsif bagi templete defult/bawaan blogspot.
# Cara membuat menu navigasi Diatas Header bagi templete defult
Sebenarnya untuk membuat navigasi di blog sangat mudah, hanya saja membutuhkan ketelitian untuk memasang kode HTML dalam templete. Biasanya dan pada umunya menu navigasi terpasang diatas hedaer. Untuk blog yang masih menggunakan templete bawaah blogspot tentu menu navigasi pada blog belum ada. Dan apabila ingin membuat menu navigasi diatas header blog maka ada kode CSS,HTML dan kode JavaSript yang harus disisipkan dalam templete.
Langkah Pertama Pasang kode CSS dibawah ini tepatnya di atas kode ]]></b:skin>
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li a:hover {background-color: #555;}
ul.topnav li.icon {display: none;}
@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
Setelah kode diatas sudah dipasang diatas ]]></b:skin> maka langkah kedua
Pasang HTML dibawah ini tepatnya di bawah kode <body>
<ul class="topnav" id="myTopnav">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="Totorial">Totorial</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li><a href="#news">News</a></li> <li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
</ul>
Catatan :
Untuk tulisan yang berwarna merah isi Link label atau halaman dan tulisan merah yang kedua isi Nama Label atau laman
Pasang JavaSript dibawah ini tepatnya diatas di atas kode </body>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
Simpan templete
# Cara mengatur menu navigasi bagi templete hasil download
Apabila anda menggunakan templete hasil unduh dari portal penyedia templete pada umumnya sudah terdapat menu navigasi dengan berbagai gaya sehingga anda tidak perlu lagi untuk membuat menu navigasi blog yang responsif. Anda hanya mengatur navigasi blog sesuai kebutuhan anda dan kategori konten blog.
Setelah anda mengopload templete/tema blog yang baru saja anda download maka langkah pertama ada penyesuaian menu navigasi di blog. Berikut cara mengatur menu navigasi blog.
1. Edit tempelet atau tema blog anda
2. cari nama menu navigasi dalam tempele menggunakan tekan Ctrl + F dalam kotak kode HTML
4. simpan templete/tema blog anda
5. Simpan
Selesai demikian artikel Cara Membuat Menu Navigasi Yang Responsif. Baca juga cara membuat laman penunjang blog
