CARA MEMBUAT MENU NAVIGASI MOBILE FRIENDLY HORISONTAL SCROLLABLE RESPONSIVE PADA BLOGGER

you asked we answer

Menilik kepada ukuran layar yang terbatas seperti layar ponsel atau smartphone, ada dua cara yang dapat kita lakukan agar menu navigasi pada hape tetap terlihat "horisontal" daripada "dropdown atau vertikal".  Menampilkan Menu navigasi horisontal yang mirip dengan tampilan pada layar desktop PC bukanlah ide yang bagus karena tidak responsif. Namun saya ingin mengajukan solusi yang telah ada pada tutorial tutorial kelas online dan menerapkannya ke halaman blogger.

Mungkin ada 2 cara yang dapat di ambil"

1. Cara pertama: Menampilkan hanya 3 menu pada bar navigasi, namun disamping sangat terbatasnya sub-menu yang dapat ditampilkan, karena salah satu atau semua menu bisa menjadi vertical susunannya, Saya melihat ini sedikit bermasalah dengan penyesuaian pada setiap ukuran layar yang lebih kecil. Apalagi jika Anda memilih ukuran font yang lebih besar.

2. Cara kedua: Membuat menu sliding atau horizontal scrollable sehingga setiap submenu dapat tampil tanpa batas secara horisontal pada layar mobile/hape/smartphone. Menu dapat digeser dari kanan ke kiri dan sebaliknya. Sepertinya saya telah membuat kedua tutorial diatas dalam blog ini. Anda dapat memperhatikan menu scrollabe pada tampilan template blog ini.

Cara kedua ini yang paling masuk akal dan diterima karena dapat menampilkan menu tanpa batas dan tidak perlu menu drop down lagi. Tinggal geser menu ke kiri dan ke kanan untuk menampilkannya.

Pertanyaan adalah aset yang berharga bagi blog ini, tentu saja adalah karena masalah desain atau masalah tampilan sebuah blog bersifat selera pribadi dan pilihannya semakin banyak dari waktu ke waktu.

Menjawab pertanyaan dari Anda diatas saya akan memberikan solusinya dan saya harap itu akan cukup mewakili teman teman yang lain juga.

Perhatikan animated gift dibawah ini:

tampilan navbar mobile
tampilan navbar mobile untuk layar hape template contempo
 
MENGAPA MENU NAVIGASI BLOG GAYA HORISONTAL PADA LAYAR HAPE?
  • Karena responsif dan mobile friendly sesuai dengan misi blogging modern
  • Karena ia ringan (tidak menggunakan javascript hanya HTML dan CSS saja)
  • Karena ia mulai menjadi trend masa kini, lihat media media besar mulai menggunakannya.
Saya akan menjelaskan teknik membuat menu navigasi "cara kedua" karena:

  1. Mudah dibuat
  2. Hanya menggunakan HTML, CSS
  3. Tidak menggunakan JavaScript
  4. Benar benar pure horisontal sliding
  5. Bisa diterapkan ke template default (bawaan) model lama dan model baru blogspot

Baca juga: 

HORIZONTAL SCROLLING MENU NAVIGASI PALING SIMPEL DAN PALING RESPONSIF UNTUK BLOGGER


Fiturnya:

Fixed Navigasi, artinya biarpun konten di scroll ke atas dan kebawah menu navigasi akan tetap terlihat keberadaannya diatas header.
Warna mudah diganti sesuai keinginan bahkan jika Anda ingin warnanya menjadi gradasi.
Cara menerapkannya:

1. Langkah pertama tambahkan CSS:

  1. Masuk kepengaturan blog:
  2. Pilih tema atau theme
  3. Plih editHTML
  4. Cari kode </head> dan letakan kode berikut tepat diatasnya: 
<style>div.scrollmenu {top:0px; background-color: #4682B4; overflow: auto; white-space: nowrap;position:fixed;z-index:99;width: 100%;height: 55px;}
div.scrollmenu a { display: inline-block;font-size: 16px; color: white; text-align: center; padding: 17px; text-decoration: none;}
div.scrollmenu a:hover { background-color: #777;}</style>

Kode yang saya sorot kuning adalah kode warna latar menu yang dapat Anda robah sendiri jika Anda menginginkan warna latar yang berbeda.

2. Langkah kedua tambahkan HTML:

  1. Masuk kepengaturan blog:
  2. Pilih tema atau theme
  3. Plih editHTML
  4. Cari kode <body> dan letakan kode berikut tepat diatasnya (atau letakan saja dibawah </head> : 
<div class='scrollmenu'> <a href='/'>Beranda</a> <a href='#news'>Berita</a> <a href='#contact'>Kontak</a> <a href='#about'>Perihal</a> <a href='#support'>Dukungan</a> <a href='#blog'>Blog</a> <a href='#tools'>Tools</a> <a href='#base'>Basis</a> <a href='#custom'>Kustom</a> <a href='#more'>Lebih banyak</a> <a href='#logo'>Logo</a> <a href='#friends'>Teman</a> <a href='#partners'>Partners</a> <a href='#people'>Orang</a> <a href='#work'>Pekerjaan</a></div> 

Anda bisa mengganti setiap tagar ('#about') dengan link blog daripada konten yang Anda inginkan.

Save tema. Lihat hasilnya melalui layar hape atau layar yang lebih kecil (mobile) dan coba usap menu ke kiri dan ke kanan melalui layar hape, menu akan terlihat sliding dengan mulus.


www.editblogtema.net

7 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Thank you so much,jadi merasa tersanjung bisa di buat pembahsan khusus dari pertanyaan saya kemarin,jawabannya sangat membatu saya sekarang,terimakasih

    BalasHapus
    Balasan
    1. saya juga berterimakasih karena pertanyaan itu sangat related dengan isi blog dan adalah input yang sangat bagus untuk melanjutkan misi blog ini he he he

      Hapus
  2. Saya coba langkah tersebut, dan sukses. Terima kasih informasinya.

    BalasHapus
  3. O ya, jika rasa masih perlu drop down solusinya gimana ya? Maksudnya tab menu gabungan antara drop down dan scrolling? Mohon bantuannya.

    BalasHapus
    Balasan
    1. cobalah pelajari melalui link ini.:

      https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_dropdown

      Hapus
  4. Kalo mau diletakan dibawah layar gimana ya?

    BalasHapus
    Balasan
    1. di bawah layar dan menjadi footer? sebaiknya jangan melakukannya, karena memeberatkan loading. Jika ingin lakukan cara pertama yang lebih ringan (hanya tiga menu) caranya:
      1. Masuk ke pengaturan Blogger
      2. Pilih Tema
      3. Pilih Edit HTML

      Letakan kode CSS berikut tepat di atas kode: </head>

      <style>
      body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      }

      .navbar {
      overflow: hidden;
      background-color: #f0f0f0;
      position: fixed;
      bottom: 0;
      width: 100%;
      }

      .navbar a {
      float: right;
      display: block;
      color: #000;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 14px;
      }

      .navbar a:hover {
      background: #f1f1f1;
      color: black;
      }

      .navbar a.active {
      background-color: #f0f0f0;
      color: black;
      }

      .main {
      padding: 16px;
      margin-bottom: 30px;
      }
      </style>

      Lalu tambahkan HTML berikut tepat di bawah kode <body> atau <body (hilangkan kurung ujungnya pada saat memasukan ke kotak pencarian halaman editor HTML blogger:

      <div class="navbar">
      <a href="#home" class="active">Home</a>
      <a href="#privasi">Privasiews</a>
      <a href="#contact">Contact</a>
      </div>

      Robah '#home', '#privasi' dan '#contact' dengan link Anda sendiri

      Save template.

      Save template

      Hapus
Lebih baru Lebih lama

Formulir Kontak