🔔 Aktifkan notifikasi disini Google News

Cara Mengubah Tampilan Widget Popular Post Median UI

Cara Mengubah Popular Post Median UI
Saifulah.id
 - Popular Post adalah widget yang berfungsi untuk menampilkan artikel atau postingan yang paling banyak di baca, alias sedang populer saat ini. Hampir semua Blog biasanya menampilkan widget ini termasuk pada template Median UI.


Tapi sayang, template Median UI tidak bisa menampilan gambar di setiap artikel Popular Post nya. Padahal gambar lebih bisa menjelaskan banyak hal dibanding sekedar tulisan judul.

Saya sendiri masih belum menemukan solusi untuk memunculkan gambar Popular Post. Akhirnya saya memodifikasi bagian lain dari widget Popular Post ini agar lebih simpel dan mudah dibaca.

Ada beberapa hal yang saya ubah, diantaranya:
  1. Mengganti gaya Nomor Urut
    Nomor urut Popular Post Median UI diawali dengan angka NOL (0). Agar lebih keren saya ganti menjadi tanda Pagar (#)
  2. Menghilangkan Label / Kategori
    Menurut saya label di Popular Post tidak begitu penting, jadi mending di buang saja.

  3. Menghilangkan Tanggal
    Ada Pro dan Kontra menampilkan tanggal di Blog, saya termasuk yang kontra akan hal itu. Karena tanggal sedikit banyak bisa mempengaruhi keinginan orang untuk membaca.

    Tanggal posting yang sudah terlalu berumur, bisa menyebabkan orang ragu membukanya. 
    Mereka takut artikel tersebut tidak lagi relevan dengan keadaan sekarang.

  4. Menyembunyikan jumlah Komentar
    Sebenarnya sah-sah saja menampilkan jumlah komentar di Popular Post, tapi kalau tanggalnya sudah di hapus kelihatannya jadi kurang rapi.

    Perlu diketahui juga bahwa, icon komentar yang ditampilkan bisa mempengaruhi score SEO di template Median UI v1.5

Jadi, ada 4 hal yang akan kita modifikasi. Simak baik-baik tutorialnya ya.

PERSIAPAN

  1. Buka Dashboard Blogger
  2. Klik Tema
  3. Tekan icon Segitiga Terbalik
  4. Pilih Edit HTML
    Cara Mengubah Posisi Judul Median UI Jadi di Tengah

  5. Cari kode /* Widget PopularPosts */
    Cara Mengubah Popular Post Median UI

A. Mengganti Gaya Nomor Urut

Cari kode ini
.itemPopular .itemInner:before{flex-shrink:0; content:'0'
Ganti angka '0' menjadi '#', seperti ini:
.itemPopular .itemInner:before{flex-shrink:0; content:'#'

B. Menghilangkan Label / Kategori

Cari kode ini
.itemPopular .postHeader, .itemPopular .postLabel.sponsored{margin-left:32px;margin-bottom:5px}
Tambahkan kode ;display:none sebelum tutup kurung, seperti ini:
.itemPopular .postHeader, .itemPopular .postLabel.sponsored{margin-left:32px;margin-bottom:5px;display:none}

C. Menyembunyikan Tanggal & Komentar

Cari kode ini
.itemPopular .itemInfo, .itemPopular .itemEntry{margin-top:10px}
Tambahkan kode ;display:none sebelum tutup kurung, seperti ini:
.itemPopular .itemInfo, .itemPopular .itemEntry{margin-top:10px;display:none}
Setelah menyembunyikan beberapa bagian Popular Post, maka tampilan yang baru akan terlihat lebih simpel dan dalam satu layar bisa terlihat semua judulnya (hemat tempat). 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.

17 komentar

Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐
  1. Min.. Kalau boleh saya request tutorialnya :

    1. Mengubah Related Post di bawah postingan menjadi Recent Post
    2. Menghilangkan tulisan "Beranda / Median" seperti itu yang ada diatas judul postingan

    Terima kasih
    1. Ok siap 👍
    2. Setuju kak, saya juga request kedua tutorial tsb, hihihi
    3. Ditunggu postingan berikutnya ya 😁
  2. Min request : Cara benerin waktu komentar *second ago* di docs.jagodesain.com di jelasin cuma pas ngikutin cara tsb ga ngaruh 🙏
    1. Ok, nanti saya buatkan tutorialnya.
  3. bang reques cara mengatasi web dapat nilai kecil di page speed insights akibat instal iklan.
    1. Buka postingan ini, di sana ada di jelaskan cara mempercepat web yang melambat akibat kode iklan 👉 2 Cara Paling Ampuh Mempercepat Loading Blog
  4. min mau tanya cara agar logo header kita ga cuma muncul di homepage saja, kalau di dalam artikel tidak ada logo header diatasnya, jadi hanya ada tombol back, dark mode dan search.. saya sudah ikuti tutor mimin yang ubah header jadi sticky header, tapi sayangnya kalau di dalam artikel logo header nya tidak muncul (dalam versi mobile) mohon tutorial nya
    1. Iya itu salah satu bug template Median UI
  5. kang gmn caranya nambahin kotak di postingan terbaru dan di artikel terkait untuk di median ui v1.6 seperti di blog ini??? kalo boleh tolong dibuatkan tutorialnya yaa
  6. Bang request cara memperbaiki tampilan error widget popular post di template fletro pro v6.1 dong
  7. Mostra como faz com foto!
    1. Mostrei com uma foto. Veja o artigo com atenção.
    2. Mais eu quero aprender a como deixar todos com foto igual ao seu "Saifullah.id"
  8. Ensina como fazer um "widget popular post" "Banyak Dibaca" igual ou parecido com o seu que possuí fotos pequenas!
  9. Bagaimana caranya ini untuk median 1.6 min
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.