Menu Navigasi Responsive sangatlah diperlukan untuk sebuah blog, apabila blog kita mempunyai tampilan yang responsive maka pengunjungpun akan betah dah tidak cepat-cepat meninggalkan halaman anda. Nah bagi anda yang mempunyai blog tetapi menu navigainya belum responsive kali ini saya akan memberikan tutorial mengenai Cara Membuat Menu Navigasi Keren Responsive secara gratis untuk anda.
 |
| Gambar Menu Navigasi Keren Responsive |
Sebenarnya sangatlah mudah untuk membuat sebuah menu navigasi yang responsive pada sebuah blog, langsung saja silahkan ikuti langkah demi langkah yang akan saya berikan berikut ini.
Cara Membuat Menu Navigasi Keren Responsive
Langkah ke-1
- Masuk ke blog anda
- Pilih Tempalte >> Edit html
- Cari kode ]]></b:skin>
- Pencet ctrl+f pada keyboard anda untuk mempermudah pencarian
- Taruh kode berikut tepat di atas ]]></b:skin>
/* MENU NAVIGATION */#navi{clear:both;font-family:'Roboto',sans-serif;width:100%;padding:0;margin:0 auto 25px}#navi ul{background:#4588f3;margin:0 auto;padding:0;text-align:left;border-radius:5px}#navi li{display:inline-block;margin:15px 0}#navi li a{display:block;color:#fff;font-weight:normal;font-weight:normal;padding:0 12px;font-size:18px;}#navi li a:hover{color:#ffce41!important}#menu{background:#89c9fa;font-family:'Roboto',sans-serif;margin:0 auto;padding:0;position:relative}#menu ul{margin:0 auto;padding:0;text-align:center;max-width:970px;margin:0 auto}#menu ul li{display:inline-block;margin:12px 0}#menu ul li a{display:block;color:#fff;padding:0 12px;font-size:15px}
- Pilih Simpan
Langkah ke-2
- Masih dalam menu edit html template anda
- Tekan ctrl+f kembali
- Cari kode </header>
- Dan Pastekan Kode berikut tepat di bawah </header>
<!-- Menu start -->
<ul class='nav'> <li><a class='active' href='bangwotto'><i class='fa fa-home'></i> Home</a></li>
<li><a href='http://bangwotto.blogspot.com/'>HOME</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
</ul>
</nav>
- Simpan dan lihat hasilnya