🔔 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)

BCA Blu - Saifullah (007847464643)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.
Seorang Guru Bahasa Inggris, Kreator Digital, Editor, Publisher, Advertiser, Blogger, Youtuber, Distributor, Desain Grafis, Web Developer, dan Programmer.

28 komentar

Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐
  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. Assalamualaikum, request versi 1.6 gan
Centang Beri Tahu Saya untuk mendapatkan notifikasi ketika komentar kamu sudah di jawab.
Parse:

Gambar Quote Pre Kode



  • Home


  • Follow


  • MENU


  • Share


  • Comment
Cookie Consent
Kami menyajikan cookie di situs ini untuk menganalisis lalu lintas, mengingat preferensi Anda, dan mengoptimalkan pengalaman Anda.
Oops!
Sepertinya ada yang salah dengan koneksi internet Anda. Harap sambungkan ke internet dan mulai menjelajah lagi.