Cara Membuat Menu Navigasi Di Blog

Zona Internetku No Comment July 27, 2018

Menu navigasi adalah sebuah menu yang berisi link-link utama seperti homepage, halaman statis seperti:(Homepage, About, Contact, Disclaimer, dan Privacy Policy), kategori blog (label), tools dan halaman penting lainnya yang biasanya terletak di atas atau di bawah blog tersebut. Menu navigasi sangat berpengaruh sekali untuk para pengunjung karena mereka bisa lebih mudah dan leluasa dalam mengakses pada halaman halaman utama yang ada di blog kita.

1. Menggunakan Widget

1. Masuk ke dalam blog kalian
2. Pilih menu "Tata letak" dan klik "Tambahkan gadget" dan pilih "Halaman"
3. Selanjutnya kalian beri centang pada halaman yang ingin kalian tampilkan pada menu navigasi tersebut

*Untuk memindahkan urutan menu pada navigasi, kalian bisa melakukan "Drag and Drop"
4. kemudian kalian klik "Simpan" untuk menyimpan perubahannya

2. Menggunakan Navigasi Dengan HTML

1. Masuk Ke dalam blog kalian
2. Pilih menu "Tata letak" dan klik "Tambahkan gadget" dan pilih "HTML/Javascript"
3. Selanjutnya kalian salin kode di bawah ini

<style>
/* Menu Navigation Responsive Zona Internetku */
.menunav_zi > span.menunav_mobile_zi{display:none}
.menunav_zi{display:block;overflow:hidden;padding:0;margin:0;background:#2574A9}
.menunav_zi span{display:block;margin:0 auto;text-align:center}
.menunav_zi span li{display:block;list-style-type:none;float:left;margin:0;padding:0}
.menunav_zi span li:hover a{background:#1F3A93}
.menunav_zi span li a{font-size:18px;text-decoration:none;padding:5px 7px;color:#ffffff;display:block;margin:0}
@media all and (max-width:768px){.menunav_zi span{display:none}.menunav_zi .active{display:block}.menunav_zi > span.menunav_mobile_zi{display:block}.menunav_zi > span.menunav_mobile_zi li a{background:#08568b;text-align:left}.menunav_zi span li{width:100%}}
</style>

<div class="menunav_zi">
<span class="menunav_mobile_zi">
<li><a href="javascript:void(0);" onclick="myFunction()">☰ MENU</a></li>
</span>
<span class="my_menunav_zi">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Disclaimer</a></li>
<li><a href="#">Privacy Police</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Tos</a></li>
</span>
</div>

 <script>
function myFunction() {
    document.getElementsByClassName("my_menunav_zi")[0].classList.toggle("active");
}
</script>

*Jangan lupa untuk ganti tanda # dengan url halaman kalian sendiri
4. kemudian kalian klik "Simpan" untuk menyimpan perubahannya

Sekian tutorial dari saya tentang Cara Membuat Menu Navigasi Di Blog dan terima kasih banyak telah berkunjung ke sini

Promo Menarik