Sunday, 17 November 2013

Cara Membuat Menu Navigasi Responsive di Blog

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.

Cara Membuat Menu Navigasi Responsive di Blog jonarendra

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:&#39;Oswald&#39;, 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:&quot;&quot;;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. 

KATEGORI:
arrow_back
arrow_forward

16 komentar

okee gua ngerti walaupun sedikit bingung

kunjungan perdana.., salam kenal,... *smile

haha, pusing lihat kode HTML dan CSS yang panjang ya?
kalau sudah sering utak atik html pasti gak bakalan bingung

salam kenal juga
terimakasih sudah berkunjung

kalau dah pernah buat hapusnya gimana gan?? apa ini responsive beneran saat di hp pun??

kalau mau dihapus, cari saja html dari menu navigasinya, trus hapus, ganti dengan html menu yang saya berikan. jangan lupa pasang cssnya juga.
di layar 320px juga responsive

Kalo mau bikin menu navigasi kaya blog ini gimana ya mas..
navigasi samping, mohon bantuannya..

cari aja di blog ini Menu Navigasi Vertikal

thank you mas bro
sudah lebih bagus menu saya http://aderizkytriprasojo.blogspot.com/2014/02/hotel-murah-di-jakarta.html
matur nuwun

Langsung Diterapkan Bos, makasih ilmunya...

mantap gan, thanks
langsung lihat aja nih di blo saya

Makasih Mastah infonya, ijin terapin pelan pelan ke blog ane

Versi Mobilenya nggak tampil gan menunya... cuma versi desktop saja yang bisa.. mohon solusinya

Berkomentarlah dengan baik dan benar, dilarang SPAM!
Tata Tertib Berkomentar
EmoticonEmoticon