Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengedit menu navigasi pada postingan blogger template Median UI


Lagi lagi saya akan menjelaskan tutorial tentang template blogger Median UI, setelah sebelumnya membahas tentang Bagaimana menambahkan icon baru, kali ini saya akan membahas tentang menu navigasinya.

Pada blogger template Median UI versi 1.5 pada halaman postingan, menu navigasinya di ubah menjadi hanya sebuah tombol kembali untuk menuju ke homepage, dan bukan untuk memunculkan menu.

Ada beberapa alasan kenapa seperti ini, salah satunya adalah karena adanya mobile menu yang melayang pada bawah layar handphone, yang terdapat beberapa tombol salah satunya adalah untuk memunculkan menu.

Sehingga pada tampilan handphone sebuah tombol untuk memunculkan menu navigasi pada header (atas) tidak di perlukan, karena sudah ada mobile menu yang berada di bawah layar.

Tapi jika anda merasa tampilannya kurang bagus, di sini kita akan modifikasi header pada tampilan postingan template Median UI menjadi seperti tampilan header di homepage, yang terdapat logo dan tombol untuk memunculkan Menu navigasi (hamburger menu).

  1. Silahkan anda buka Dashboard blogger anda
  2. Klik menu Tema dan tekan tanda panah ke bawah pada sebelah tombol "Sesuaikan"
  3. Pilih Edit html
    Edit html
  4. Pada keyboard tekan Ctrl + F untuk memunculkan papan penelusuran

    Jika pada handphone tidak bisa, silahkan download terlebih dahulu keyboard yang terdapat tombol Ctrl + F atau bisa juga cari secara manual.
  5. Cari dan ubahlah kode berikut :
    .onItem .headerIcon label.navMenu, .onItem #header-widget{display:none}
    .onItem .headerIcon a.navMenu{display:flex; margin-left:0;left:-5px}
    // Ubah menjadi
    .onItem .headerIcon label.navMenu, .onItem #header-widget{display:block}
    .onItem .headerIcon a.navMenu{display:none}
  6. Klik icon save jika sudah selesai.
Admininistrator
Admininistrator Suka menatap langit.

5 komentar untuk "Mengedit menu navigasi pada postingan blogger template Median UI"

  1. biar pencarian nya di header kaya website ini bagaimana ya? Soalnya yang redesign ratarata ada di pojok kanan atas kaya punya saya
    https://blogngaguruan.blogspot.com/
    mohon banuannya

    BalasHapus
    Balasan
    1. Saya kurang paham kak, saya cek posisi icon pencarian nya di mobile sama seperti situs ini.

      Hapus
  2. Om cara ngatasi judul navbar ku kecil biar besar dan bsa diberi gambar gmna ya ?
    Coba cek
    ramahapp.blogspot.com

    BalasHapus
    Balasan
    1. Saran saya buat logo aja, di logo itu udah ada gambar sama teks, jadi tinggal pasang aja.

      Untuk pasang logonya ada di tata letak -> header widget.

      Hapus
  3. Gan, cara hilangin iklan di homepage blog dan hapus deskripsi biar homepagenya sama kayak punya agan gimana ya gan? Terimakasih sudah membaca. Tsubete.blogspot.com

    BalasHapus