Masih membahas cara membuat menu navigasi, kali ini akan saya bagi cara membuat menu navigasi yang sangat mudah. Caranya anda hanya tinggal memasangnya lewat fitur tambahkan widget/ gadget di blog anda. Meski sederhana, tampilannya cukup elegan dan responsive tentunya. Tampilan web OK, tampilan mobile pun bisa, dengan tambahan sedikit pengaturan agar muncul untuk versi mobilenya. Memang untuk tampilan menu kali ini tidak pakai dropdown, tapi tetap cantik dan cocok untuk dipasang pada blog yang minimalis namun tetap berkelas. Bagaimana tampilannya?. Lihat saja blog ini, salah satu menunya juga memakai cara ini.
Sekarang untuk langkah pemasangannya, anda bisa ikuti tutorial berikut ini.
1. Buka akun blogger anda.
2. Pilih layout (tata letak).
3. Klik tambahkan widget (add gadget), dan kemudian pilih html/ javascript.
4. Setelah terbuka, kosongkan judul dan masukkan kode berikut ini ke dalam kotak html.
Berikut kodenya:
<style type="text/css"> body{font-family:"Roboto",sans-serif!important;font-size:100%; margin:0px;padding:0px;} /*navmenu-horizontal*/ #nav{background:#111111;} #nav ul{margin:0;padding:0;} #nav li{display:inline;display:inline-block;display:-moz-inline-stack;list-style:none;margin:0;padding:0;zoom:1;} #nav li a{color:#ffffff;display:block;padding:1em;text-decoration:none;} #nav li a:hover{background:#191919;color:#ffffff;} #nav li:first-child{background:#008000;} .top-menu{background:#002200;color:#fff;display:none;padding:10px 5px;text-align:left;text-decoration:none;} .top-menu span{float:right;margin-right:1em;} .top-menu b{font-size:27px;} #nav input[type=checkbox]:checked ~ #menus{display:block;} #nav input[type=checkbox]{display:none;} /*css-styles-responsive*/ @media screen and (max-width:768px){ #nav ul{display:none;position:static;} #nav li{border-bottom:0px solid #333;} #nav ul li, #nav li a{width:100%;} #nav li a{display:block;height:5px;line-height:10px;} #nav li a{text-align:left;font-size:18px;} .top-menu{display:block!important;line-height:18px;} .top-menu:hover{cursor:pointer;} label{margin:0!important;} } </style>
<!--- Kode HTML Menu Horizontal Responsive Sederhana ---> <nav id='nav'> <label class='top-menu' for='top-menu'><b>☰</b> <span>MENU</span></label> <input autocomplete='off' id='top-menu' role='button' type='checkbox'/> <ul id='menus'> <li><a href='https://www.santossalam.blogspot.com/'><i class="fa fa-home" aria-hidden="true"></i> <b>Home</b></a></li> <li><a href='https://santossalam.blogspot.com'><i class="fa fa-Daftar Isi-w" aria-hidden="true"></i> <b>Daftar Isi</b></a></li> <li><a href='https://santossalam.blogspot.com'><i class="fa fa-Tentang Saya" aria-hidden="true"></i> <b>Tentang</b></a></li> <li><a href='https://santossalam.blogspot.com'><i class="fa fa-Hubungi Kami" aria-hidden="true"></i> <b>Hubungi</b></a></li> <li><a href='https://santossalam.blogspot.com'><i class="fa fa-Kebijakan Privasi" aria-hidden="true"></i> <b>Privacy Policy</b></a></li> <li><a href='https://santossalam.blogspot.com'><i class="fa fa-Disclaimer" aria-hidden="true"></i> <b>Disclaimer</b></a></li> </ul>
</nav>
Keterangan:
Ganti link Url dan Nama-nama Menu di atas dengan Link Url dan nama-nama menu anda. Anda juga bisa menampilkan ikon pada menu anda dengan mengubah kode fa fa di atas. Untuk ukuran dan warna background bisa juga anda ubah sesuai selera anda. Jika sudah, setelahnya pilih simpan.
5. Menu navigasi sudah tampil pada versi web, sekarang tinggal mengaturnya untuk versi mobile.
6. Kembali ke menu dashboard, pilih thema dan klik edit html.
7. Setelah terbuka, cari kode widget yang dipasang tadi dan tambahkan kode pengaturan mobile='yes'. Contohnya seperti berikut ini:
 |
| pengaturan agar muncul pada versi mobile |
9. Setelahnya klik simpan dan lihat hasilnya.
Baca Juga
Demikianlah Cara Mudah Membuat Menu Navigasi Responsive Lewat Tambahkan Widget (Gadget). Selamat Mencoba, semoga berhasil dan semoga bermanfaat.
Labels:
Blogging
Thanks for reading Cara Mudah Membuat Menu Navigasi Responsive Lewat Tambahkan Widget (Gadget) . Please share...!
0 Komentar untuk "Cara Mudah Membuat Menu Navigasi Responsive Lewat Tambahkan Widget (Gadget) "
Terima kasih telah berkunjung ke blog saya, silahkan berkomentar dengan sopan. Maaf, Komentar berisi Link Aktif, Promosi Produk Tertentu, J*di, P*rn*, Komentar berbau SARA dan Permusuhan, tidak akan dipublish.