Cara Membuat Menu Navigasi Responsive di Blog. Membuat menu horizontal dapat membuat blog kita mudah di navigasi oleh pengunjung. Widget ini biasanya berisi link bagian beranda, daftar isi, tentang saya dan label lainnya. Supaya lebih menarik, mari kita buat menu ini menjadi responsive atau menyesuaikan terhadap layar apapun.
Yang unik dari menu navigasi ini, ketika diberi CSS responsive, dan menu di buka pada layar yang berukuran kecil, akan menjadi dropdown atau menu buka tutup (show/hide). Jadi, ada tombol kecil yang jika di klik akan terbuka/tampil menu menu nya. Langsung saja terapkan tutorial dibawah ini.
Cara Memasang Menu Navigasi Responsive di Blog
1. Login ke blogger
2. Pada dashboard, pilih blog anda
3. Masuk ke Template, Edit HTML
4. Lalu, copy kode CSS dibawah ini dan paste diantara kode <style type='text/css'> dan </style>
#menu{background:#181818;font-family:'Oswald', Arial, sans-serif;color:#fff;height:50px;width:1024px;margin:0 auto;}#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}#menu ul{height:35px;width:1022px}#menu li{float:left;display:inline;position:relative;font-size:15px;font-weight:normal}#menu a{display:block;line-height:50px;padding:0 30px;text-decoration:none;color:#ccc;text-transform:uppercase;}#menu li a:hover {color:#ccc;background:#464646;}#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}#menu label{font-size:20px;display:none;width:35px;height:20px;line-height:20px;text-align:center;color:#ccc}#menu label span{font-size:15px;position:absolute;left:35px;}#menu ul.sub{height:auto;overflow:hidden;width:180px;background:#181818;position:absolute;z-index:99;display:none;left:-1px;}#menu ul.sub li{display:block;width:100%;font-size:13px;text-shadow:none}#menu ul.sub a{color:#ccc;}#menu li:hover ul.sub{display:block}#menu a.dropdown{padding:0 27px 0 14px}#menu a.dropdown::after{content:"";width:0;height:0;position:absolute;top:14px;right:9px}#menu ul.sub a:hover{background:#464646;color:#ccc}@media screen and (max-width:1024px){#menu{position:relative;width:906px;margin:0 auto}#menu ul{width:100%}}@media screen and (max-width:960px){#menu{position:relative;width:96%;margin:0 auto;padding:0}}@media screen and (max-width:768px){#menu{position:relative;width:97%;margin:0 auto;padding:0}#menu ul{background:#181818;position:absolute;top:100%;left:0;z-index:3;height:auto;display:none;width:100%;}#menu ul.sub{width:100%;position:static;padding-left:20px;border:none}#menu li{display:block;float:none;width:auto;border-top:1px solid #ccc}#menu input,#menu label{position:absolute;top:7px;left:0;display:block}#menu input{z-index:4}#menu input:checked + label{color:black}#menu input:checked ~ ul{display:block}}
5. Nah, sekarang saatnya pasang menu navigasinya, caranya, copy kode HTML dibawah ini
<nav id='menu'><input type='checkbox'/><label><i class='icon-reorder'/><span>Navigation</span></label><ul><li><a href='/' title='Halaman beranda'>Beranda</a></li><li><a href='/p/daftar-isi.html' target='_blank' title='Lihat semua artikel Blog Jona Rendra'>Daftar Isi</a></li><li><a href='/p/kontak.html' target='_blank' title='Hubungi admin blog'>Kontak</a></li><li><a href='/p/tentang-saya.html' target='_blank' title='Seputar admin blog'>Tentang Saya</a></li><li><a href='#' title='Tukar Link'>Tukar Link</a><ul class='sub'><li><a href='/p/link.html' target='_blank' title='Daftar link blog sahabat Jona Rendra'>Link Text Sahabat</a></li><li><a href='/2013/02/link-sahabat-jona-rendra-blog-tutorial.html' target='_blank' title='Banner blog sahabat Jona Rendra'>Banner Sahabat</a></li></ul></li><li><a href='#' title='Alat-Alat'>Alat-Alat</a><ul class='sub'><li><a href='/p/html-editor_31.html' target='_blank' title='Alat untuk mengedit HTML'>HTML Editor</a></li><li><a href='/p/beautify-and-compressor.html' target='_blank' title='Kompres dan percantik CSS anda'>CSS Compressor</a></li><li><a href='/p/color-picker_31.html' target='_blank' title='Alat pencari HTML kode warna'>Color Picker</a></li><li><a href='/p/konversi-html.html' target='_blank' title='Alat untuk mengonversi HTML'>Konversi HTML</a></li></ul></li><li><a href='#' title='Halaman penting lainnya'>Lainnya</a><ul class='sub'><li><a href='/p/sejarah.html' target='_blank' title='Sejarah perkembangan Blog Jona Rendra'>Sejarah Jona Rendra</a></li><li><a href='/p/peraturan-komentar.html' target='_blank' title='Peraturan dalam berkomentar di blog ini'>Peraturan Komentar</a></li><li><a href='/p/top-komentator.html' target='_blank' title='Teman yang sering berkomentar'>Top Komentator</a></li><li><a href='/p/kebijakan-privasi.html' target='_blank' title='Kebijakan privasi dari Blog Jona Rendra'>Kebijakan Privasi</a></li></ul></li></ul></nav>
6. Terakhir, simpan template anda dan silahkan preview blog anda.
Kalau mau pasang navigasi yang keren, bisa dilihat pada postingan saya yang Menu Navigasi Inset Outset. Tetapi, kalau anda masih belajar tentang menu navigasi dan pemasangan serta pengeditan kodenya, pelajari artikel Tutorial Mengedit Menu Navigasi.
Akhirnya, setelah lama saya tidak posting, akhirnya ada juga kesempatan untuk update artikel terbaru yang berjudul Cara Memasang Menu Navigasi Responsive di Blog ini. Setelah hampir lebih dari 2 minggu sejak artikel sebelumnya Jenis Jenis Tag Kondisional di publikasikan, blog ini sedang masa perbaikan template.
Sekian dulu artikel blog Jona Rendra yang berjudul Cara Membuat Menu Navigasi Responsive di Blog, semoga bermanfaat untuk anda. Dan apabila ada kesulitan atau tampilan widget kurang berkenan, silahkan tanyakan permasalahan anda lewat komentar dibawah.
