Beranda
Median UI
Median UI 1.5

Cara Modifikasi Main Menu Template Median UI v1.5

Jarak menu yang terlalu jauh akan menciptakan ruang kosong yang terlalu besar. Sehingga berakibat template kurang seimbang dan tidak enak dipandang.
Saifullah.id
Cara Modifikasi Main Menu Template Median UI
Saifulah.id - Main Menu dalam sebuah template blog biasanya merupakan tempat untuk menampilkan kategori berbentuk menu drop down. Menu isi seringkali di letakkan di atas, tepatnya di samping atau di bawah logo blog.


Namun, berbeda dengan template Median UI yang akan kita bahas ini. Median UI merupakan template blogger yang tampilannya mengadopsi tampilan Google Drive, Blogger, dan Google Playstore. Dimana Main Menu di letakkan di samping kiri website. Coba perhatikan gambar berikut:
Tampilan Median UI Tampilan Google Drive Tampilan Blogger Tampilan Google Playstore
Kalau diperhatikan, posisi widget yang ada di Median UI benar-benar meniru tampilan dari produk Google. Tapi, ada satu kekurangan dari Median UI, yaitu jarak antar menu terlalu jauh.

Jarak menu yang terlalu jauh akan menciptakan ruang kosong yang terlalu besar. Sehingga berakibat template kurang seimbang dan tidak enak dipandang.

Selain itu, kalau blog kita memiliki banyak menu dan kategori, menu tersebut pasti akan tersembunyi di bawah. Dan untuk melihatnya harus di scroll dulu. Ribet!

Pengunjung kita adalah raja, sebisa mungkin kita harus memanjakan mereka dengan fitur yang mudah di akses. Oleh sebab itu, berikut saya berikan solusi permasalahan ini.

CARA MEMPERKECIL JARAK MENU MEDIAN UI

  1. Buka Dashboard Blogger
  2. Klik Tema
  3. Tekan icon Segitiga Terbalik
  4. Pilih Edit HTML
    Cara Modifikasi Main Menu Template Median UI

  5. Lalu cari kode .htmlMenu .link{white-space:nowrap
  6. Maka kalian akan menemukan kode yang seperti ini
    .htmlMenu .link{white-space:nowrap; display:flex;align-items:center;width:100%; padding:10px 25px;position:relative; color:inherit}
  7. Ubah nilai padding menjadi 5px, sehingga hasilnya seperti ini
    .htmlMenu .link{white-space:nowrap; display:flex;align-items:center;width:100%; padding:5px 25px;position:relative; color:inherit}
  8. Simpan Tema
HASILNYA
Cara Modifikasi Main Menu Template Median UI

Mau donasi lewat mana?

BRI - Saifullah (05680-10003-81533)

BCA Blu - Saifullah (007847464643)

Mandiri - Saifullah (1460019181044)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.

Penulis

Saifullah.id
PT Saifullah Digital Advantec

34 komentar

  1. ZVX-GAMING-34
    ZVX-GAMING-34
    mantap bang,bang reques dong cara agar judul postingan rata tengah.
    1. Saifullah.id
      Saifullah.id
      Ok, nanti saya buatkan tutorialnya.
    2. ZVX-GAMING-34
      ZVX-GAMING-34
      bang tadi saya coba,hasilnya main menu yatu sama header di mode deskop.
    3. Saifullah.id
      Saifullah.id
      Maaf bang, kayaknya saya salah tuliskan kodenya. Silakan coba lagi. Tutorialnya sudah di update
  2. Misumi Makoto
    Misumi Makoto
    Terimakasih banyak bang,next sticky header seperti blog ini😅🙏
    1. Saifullah.id
      Saifullah.id
      Sudah di posting
  3. HostAdsense.com
    HostAdsense.com
    req popular post kaya punya agan
  4. Animelite
    Animelite
    min, request cara buat bottom navigation seperti median ui https://i.postimg.cc/4x3sfk6P/Screenshot-1.png, lalu bagaimana cara memasukan url searchnya
    1. Saifullah.id
      Saifullah.id
      Maksudnya kakak pakai template lain, tapi ingin punya buttom navigasi kayak Median UI gitu ya?
    2. Animelite
      Animelite
      iya min, asli banyak yang nyari tutorialnya (di grup fb) lalu di google belum ada juga yang buat (yang median ui, karena bagus aja bottom navigationnya, kek aplikasi2 gitu)
  5. Saifullah.id
    Saifullah.id
    Oh gitu. Nanti saya coba cari solusinya.
  6. elzeno
    elzeno
    Bang, tutorial cara agar menu median ui awal minimize hanya tampil ikon saja, dan bila diklik muncul (kebalikan dari defaultnya).
    terima kasih saya tunggu jawabannya.
    1. Saifullah.id
      Saifullah.id
      Ok, di tunggu ya update tutorial selanjutnya.
  7. Zen
    Zen
    Halo mas, thanks tutorialnya. Saya mau tanya, tamplate median UI saya v.1.3 dan kalau di mobile kenapa menu harus di klik 2 kali ya?Kalau klik sekali cuma kembali ke homepage, klik kedua baru ke halaman menu tsb.
    Bisa tolong dibantu mas?
    1. Saifullah.id
      Saifullah.id
      Halo, kalau dari keluhannya sepertinya ada yang salah dengan kode MAIN MENU nya. Kalau MAIN MENU tidak pernah diubah, kayaknya karena pernah memasukkan javascript dari luar kedalam template.
  8. Nadhiva
    Nadhiva
    Error bang
  9. Nadhiva
    Nadhiva
    punya saya jadi error ya profil di pojok kanan atasnya berantakan setelah edit
    1. Saifullah.id
      Saifullah.id
      Coba ganti sampai bagian ini aja kak

      /* Header Section Saifullah.id */
      header{width:100%;background-color:var(--header-bg);color:var(--header-text);z-index:10; -webkit-transition:var(--transition-1);transition:var(--transition-1);border-bottom:1px solid var(--content-border); position:-webkit-sticky;position:sticky;top:0} header a{color:inherit} header svg{width:20px;height:20px;fill:var(--header-icon)} header svg.line, header svg .line{fill:none;stroke:var(--header-icon)}

      .Header{margin:auto 0;background-repeat:no-repeat;background-size:100%;background-position:center} .Header a{display:block} .Header img{max-width:150px;max-height:45px} .Header h1, .Header h2{display:block; font-size:var(--header-title); font-weight:700;color:inherit;} .Header .headerTitle{max-width:170px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; display:block;font-size:25px;background: -webkit-linear-gradient(45deg, #3291d1, #E02028);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}

      .headerContent{position:relative;height:45px;display:flex} .headerDiv{display:flex;align-items:center} .headerLeft{padding-left:25px;flex:0 0 auto;width:var(--nav-width)} .headerLeft .headerIcon{margin-right:15px} .headerRight{padding-left:25px;padding-right:25px; flex:1 0 auto;width:calc(100% - var(--nav-width))} .headerRight .headerIcon{margin-left:auto; position:relative}

      .headerSearch{width:100%;max-width:550px} .headerSearch form{position:relative;width:100%;font-size:95%} .headerSearch input[type=text]{display:block;width:100%;outline:0;border:0;border-radius:10px; background-color:var(--transparent-bg); padding:12px 48px} .headerSearch input[type=text]:focus ~ .close{opacity:1;visibility:visible} .headerSearch button{background:transparent;border:0;outline:0;padding:0; position:absolute;left:15px;top:0;bottom:0; display:flex;align-items:center} .headerSearch button svg{width:18px;height:18px; opacity:.7} .headerSearch button.close{right:12px;left:auto;opacity:0;visibility:hidden; transition:var(--transition-4)} .headerSearch button.close svg{width:16px;height:16px}
  10. Nadhiva
    Nadhiva
    Kalau cuma edit Main Menu aja bisa ga? Tanpa edit Header Section, soalnya pas ganti kode Header Section bagian profil kanan atasnya otomatis muncul gabisa diklik show/hide
    1. Saifullah.id
      Saifullah.id
      Kakak pakai Median UI versi biasa atau AMP?
    2. Nadhiva
      Nadhiva
      Saya versi non AMP, contoh kode header section bawaan di template saya cek disini: http://pastebin.com/aWUQxS54
    3. Nadhiva
      Nadhiva
      Agak beda dengan yg di screenshot km di postingan ini
    4. Saifullah.id
      Saifullah.id
      Kakak pakai Median UI versi 1.5 atau versi 1.4?
    5. Nadhiva
      Nadhiva
      V 1,5 baru pagi ordernya
    6. Saifullah.id
      Saifullah.id
      Oh, saya paham. Kodenya sebenarnya sama. Namun kode saya sudah saya modifikasi jadi
      1. Minify CSS: menghapus enter pada CSS agar loadingnya cepat, makanya bentuk kodenya terlihat beda, padahal cuma dihapus bagian spasi/enter
      2. Bagian kode Profile: Di template bawaan profile hanya tampil di homepage, sedang di saya tampil di semua halaman
      3. Bagian Mode Malam: Di template bawaan tombolnya pakai geser. Tapi saya ganti jadi tombol bulan dan matahari yang bergantian saat di tekan.
    7. Saifullah.id
      Saifullah.id
      O,ya kak. Tutorialnya sudah saya perbaiki. Ternyata ada yang keliru setelah saya cek ulang. Silakan di coba kembali 🙏
  11. Admin
    Admin
    Tetap error kak. Profil dipojok kanan jadi berantakan
    1. Saifullah.id
      Saifullah.id
      Maaf kak, ternyata saya salah kasihkan kode. Silakan cek ulang. Tutorialnya sudah diperbaiki. Jika ada kendala lagi, jangan sungkan untuk bertanya. 🙏
  12. Kante
    Kante
    Cara ganti dan tambah iconnya juga donk min
    1. Saifullah.id
      Saifullah.id
      Sudah dibahas di postingan ini kak, silakan klik Cara Ganti dan Tambah Icon Median UI
  13. Esa Adecsa
    Esa Adecsa
    di v1.6 gmna ya bg ? saya cari kodenya ga ketemu
  14. triosihn
    triosihn
    bang cara bikin menu navigation kyk blog ini gimana ? Yg ada garis dan icon nya itu
    1. Saifullah.id
      Saifullah.id
      Abang pakai template apa sekarang?
Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐