Cara mudah membuat menu horizontal responsive sederhana dengan CSS - Mengelola Blog

Cara mudah membuat menu horizontal responsive sederhana dengan CSS

Salah satu hal yang wajib untuk Anda sediakan pada desain blog Anda adalah menu navigasi. Tujuan disediakannya menu navigasi ini adalah agar pengunjung menjadi lebih mudah untuk menemukan konten lainnya yang mereka cari dengan cepat dan sesuai dengan harapan.

Sesuai prinsip utamanya, menu navigasi berfungsi sebagai terminal / tempat kumpulan link utama yang konsisten dan mudah untuk ditemukan, sehingga pengunjung bisa berpindah dari satu halaman ke halaman lainnya dengan mudah.

Banyak cara dan metode yang bisa digunakan untuk membuat menu navigasi di blog, beberapa diantaranya adalah dengan menggunakan gadget label ataupun gadget pages yang bisa Anda letakkan dimana saja terutama di bawah Judul Blog.

Namun umumnya, menu navigasi yang menggunakan gadget label bawaan blogspot pada template model lama tidaklah responsive, sehingga terasa sangat tidak cocok dan bisa mengurangi kenyamanan pengunjung.

membuat menu horizontal responsive dengan css
Baca juga : 4 Varian template blogger terbaru

Oleh karena itu, pada artikel kali ini saya akan menginformasikan bagaimana cara membuat menu navigasi responsive sederhana yang bisa dengan mudah untuk Anda praktekkan sendiri.

Gambar dibawah berikut adalah tampilan dan bentuk dari menu horizontal responsive yang sudah jadi baik itu tampilan menu horizontal responsive versi desktop ataupun versi mobile.

Tampilan menu horizontal responsive versi desktop
Tampilan menu horizontal responsive versi desktop

Tampilan menu horizontal responsive versi mobile
Tampilan menu horizontal responsive versi mobile

Oiya, bagi Anda yang ingin belajar membuat template bawaan blogspot menjadi responsive silahkan download ebook gratis membuat template bawaan blogspot menjadi responsive.


Cara membuat menu horizontal responsive sederhana

Berikut adalah langkah-langkah bagaimana cara membuat menu horizontal responsive sederhana di blogger
  1. Login ke akun Blogspot Anda dan pilih blog yang akan di pasangkan menu horizontal responsive ini
  2. Klik pada menu Layout yang terletak disisi kiri layar Anda
  3. Klik Add A Gadget hingga muncul pop up untuk menambahkan gadget blog
  4. Pilihlah Gadget HTML/JavaScript, kemudian copy pastekan script dan kode dibawah ini
    <!--- Kode CSS Menu Horizontal Responsive Sederhana --->
    <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:#e42a2a;}
    .top-menu{background:#c91717;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:30px;}
    #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:1px solid #333;}
    #nav ul li, #nav li a{width:100%;}
    #nav li a{display:block;height:auto;line-height:normal;}
    #nav li a{text-align:left;}
    .top-menu{display:block!important;line-height:30px;}
    .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>&#9776;</b> <span>Menu</span></label>
    <input autocomplete='off' id='top-menu' role='button' type='checkbox'/>
    <ul id='menus'>
    <li><a href='/'>Home</a></li>
    <li><a href='#'>About</a></li>
    <li><a href='#'>Contact</a></li>
    <li><a href='#'>Sitemap</a></li>
    </ul>
    </nav>
  5. Klik Save untuk menyimpan gadget
  6. Geser dan letakkan gadget yang baru dibuat (sebaiknya) tepat dibawah Header
  7. Klik Save arrangement yang ada disudut kanan untuk menyimpan perubahan dan lihatlah hasilnya
Catatan :
Ganti tanda # dengan alamat url halaman tujuan, lalu ikuti dengan mengganti kata About, Contact, Sitemap sesuai dengan keinginan Anda.

Contoh :
<li><a href='http://www.mengelolablog.com/search/label/Mengelola%20artikel'>Mengelola Artikel</a></li>
<li><a href='http://www.mengelolablog.com/search/label/Mengelola%20waktu'>Mengelola Waktu</a></li>
<li><a href='http://www.mengelolablog.com/search/label/Mengelola%20data'>Mengelola Data</a></li>



Baca juga : Tips membuat navigasi blog yang baik


Kesimpulan

Salah satu kelebihan dari tipe menu navigasi ini adalah menu ini cukup ringan dan tidak terlalu mempengaruhi loading blog. Selain itu, menu horizontal responsive sederhana dengan CSS ini sangatlah simple dan juga mudah untuk dipasang sebagai menu navigasi blog Anda.

Demikianlah artikel tentang Cara mudah membuat menu horizontal navigasi responsive sederhana dengan CSS ini bisa saya sampaikan semoga bermanfaat.
Daftar isi [ Lihat ]
SHARE
6 komentar
  1. Setelah saya coba hasilnya keren memuaskan menu navigasinya, tapi misal kalau di tambah jadi lebih banyak menunya apakah masih bisa mas..?

    BalasHapus
    Balasan
    1. Bisa mas, tinggal tambahkan di bagian ini saja sesuai dengan keinginan :
      <li><a href='/'>Home</a></li>
      <li><a href='#'>About</a></li>

      selamat mencoba :)

      Hapus
  2. Mau tanya gan cara buat bikin halaman statis biar dibawah kaya punya agan tu gimana caranya?

    BalasHapus
    Balasan
    1. Sebenarnya sama aja gan seperti buat menu diatas, cuma saya ngga pakai responsivenya, kodenya ul li langsung saya masukan lewat edit template kedalam template html blog diatas kode footer gitu.

      Mungkin kedepannya akan saya buatkan artikel deh biar agan lebih jelas.

      Hapus
  3. Saya sudah buat menu bawaan B's sbgai menu navigasi blog www.meucensemua. blogspot.com tp klmahannya Saat diklik postingn menunya hilang,kalau Saya pakai yg abg post INI apa akan bermasalah krn double?trmksh ats pencrhannya,Salam.

    BalasHapus
    Balasan
    1. Kalau saya lihat... itu sepertinya pakai tag kondisional. Coba pada bagian menu tersebut, tag kondisionalnya dihapus aja mas, jadi di semua halaman... nantinya menu tersebut tetap ada.

      Hapus