🔔 Aktifkan notifikasi disini Google News

Cara Ubah Tampilan Homepage Median UI v1.5 Sama Seperti Median UI v1.4

Cara Ubah Tampilan Homepage Median UI v1.5 Sama Seperti Median UI v1.4
Saifulah.id
 - Tampilan Postingan di Homepage Median UI versi 1.5 menurut saya justru kualitasnya malah menurun dibanding template Median UI versi 1.4. Saat versi 1.4 sudah menggunakan style Card, tapi di versi 1.5 justru pakai style Flat yang membuatnya terlihat kurang rapi.


Ternyata keluhan ini tidak hanya dirasakan saya sendiri, blogger lain juga ada chat saya dan menanyakan cara mengubah tampilan ini. Akhirnya saya bereksperiment lagi, untuk menemukan kode yang akan dimodifikasi.

Setelah beberapa hari kemudian, saya menemukan sumber kodenya dan mulai menunjukkan hasil. Coba lihat perbandingan tampilan template Median UI yang asli dan yang sudah di Modifikasi.
Cara Ubah Tampilan Homepage Median UI v1.5 Sama Seperti Median UI v1.4

Bagaimana? Bagus yang kiri atau yang kanan? Saya yakin kalian akan menjawab yang kanan, karena terkesan lebih rapi dan profesional. Oleh sebab itu, berikut saya berikan tutorial memodifikasinya.

Cara Ubah Tampilan Homepage Median UI Terbaru

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

  5. Lalu cari kode /* blogPosts Section */
    Cara Ubah Tampilan Homepage Median UI v1.5 Sama Seperti Median UI v1.4

  6. Ganti dengan kode yang sudah dimodifikasi
    .blogPosts{display:flex;flex-wrap:wrap; position:relative;width:calc(100% + 20px);left:-10px;right:-10px} .blogPosts.empty{width:100%;left:0} .blogPosts.empty ~ .blogPager{justify-content:flex-start} .blogPosts .hentry{padding:10px 10px 40px;border-radius:8px;border:1px solid var(--content-border);border-radius:8px;box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);display:block;position:relative; width:calc(33.333% - 20px); margin-left:10px;margin-right:10px;margin-bottom:10px; padding-bottom:38px} .blogPosts .hentry.noInfo, .blogPosts .hentry.product, .blogPosts div.hentry, .blogPosts .hentry.noComment{padding-bottom:0} .blogPosts .hentry.noAd .widget, .Blog ~ .HTML{display:none} .onItem .blogPosts{display:block; width:100%;left:0;right:0} .onItem .blogPosts .hentry{width:100%; margin-left:0;margin-right:0;margin-bottom:0;padding-bottom:0;border:none;box-shadow:none}
    .bayang{padding:10px 10px 40px;border-radius:8px;border:1px solid var(--content-border);border-radius:8px;box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);display:block;position:relative; width:calc(33.333% - 20px); margin-left:5px;margin-right:5px;margin-bottom:10px; padding-bottom:38px}
  7. Lalu cari kode <b:eval expr='snippet(data:post.body

  8. Kemudian ganti menjadi
    <b:eval expr='snippet(data:post.snippets.long
  9. Cari kode margin-top:18px

  10. Ganti dengan kode
    margin: 10px 10px
  11. Simpan Tema

Demikian Cara Mengubah Tampilan Homepage Median UI v1.5 Sama Seperti Median UI v1.4. Semoga bermanfaat 😊

Mau donasi lewat mana?

SeaBank - Saifullah (9016-9529-0071)

BRI - Saifullah (05680-10003-81533)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.
Selanjutnya kalian mau dibuatkan artikel tentang apalagi? Tuliskan pada kolom komentar di bawah ini

29 komentar

Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😥😪😭😱🤭😇🤲🙏👈👉👆👇👌👍❤🤦‍♂️❌✅⭐
Centang Beri Tahu Saya untuk mendapatkan notifikasi ketika komentar kamu sudah di jawab.
Parse:

Gambar Quote Pre Kode
  1. mantap bang thank,tapi ko di "Anda mungkin menyukai postingan in" gak rubah gan,muhun tutorialnya lagi bang.
    1. Tutorialnya cek di sini https://www.saifullah.id/2021/08/cara-modifikasi-widget-related-post-median-ui.html
  2. Oh, kalau yang bagian "related post" itu beda lagi kodenya. Nanti saya buatkan lagi tutorialnya.
    1. ouh ok bang,sekalian cara menghilangkan snippet bang
    2. Tutorialnya cek di sini https://www.saifullah.id/2021/08/cara-menghilangkan-snippet-median-ui.html
  3. Kalo hapus deskripsi postingan gmna min? Tampilan seperti ini
    1. Cek postingan ini > https://www.saifullah.id/2021/08/cara-menghilangkan-snippet-median-ui.html
  4. Bang tadi saya coba hasilnya berhasil,cuman anehnya tanggal sama logo komentarnya gebug malah nempel keluar garis.
    1. Nah iya sama.
    2. Silakan cek ulang, karena tutorialnya sudah diperbaiki.
  5. Error bro malah memanjang daftar artikelnya. Cek guntur.eu.org ngatasinnya gimana?
    1. Udah fix bro, ada kode CSS bentrok hehe udah dihapus. Thank infonya
    2. Sama-sama bro. Hehe
  6. Kalo ubah tampilan homepage jadi seperti fletro dengan style card gimana, bang?
    1. Kalau fletro saya belum punya templatenya. Jadi belum pernah lihat kode di dalamnya seperti apa. Untuk meniru atau memodifikasi tampilannya setidaknya saya harus melihat struktur kode template fletro.
  7. Cara merubah ukuran thambnail pada template median ui bagaimana bang agar jadi lebih tinggi dan tidak kepotong gambarnya, semoga dibantu
    1. Tutorialnya sudah saya buat > Klik Disini
  8. Cara agar nama label berada di bawah judul postingan gimana, bang?
  9. Caranya berhasil, tapi kenapa di grid mode jadi per 3 postingn bukan 2 postingan?
  10. Ini sepertinya bawaan templatenya.

    Caranya agar saat mode desktop, postingan yang muncul di mode grid jadi 2 2, gimana bang?
  11. bang kalo ngubah di v1.6 biar seperti di v1.4 ini gmn bang? beda kodenya nih
    1. iya bang butin tutornya 1.6 kaya 1.4
    2. betul bang, situnggu tutorialnya
  12. biar jadi 2 kolom diversi mobile gimana? demo bosgitar.blogspot
    1. Median UI 1.5 secara bawaan memang 2 coloum. Yang 1 kolom itu Median UI 1.6
    2. ok thank infonya
    3. My pleasure
  13. Assalamualaikum, request versi 1.6 gan

Daftar isi



  • Home


  • Follow


  • MENU


  • Share


  • Comment
Oops!
Sepertinya ada yang salah dengan koneksi internet Anda. Harap sambungkan ke internet dan mulai menjelajah lagi.
AdBlock Detected!
Kakak pakai plugin pemblokir iklan ya? Tolong kecualikan website ini dalam pemblokiran ya. Karena kami butuh penghasilan dari iklan untuk terus mengelola website ini agar bisa update artikel bermanfaat. Makasih ya 😊
Site is Blocked
Sorry! This site is not available in your country.