Cara Mengubah Tampilan Widget 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

   
   
   
5. Cari kode /* Widget PopularPosts */

   

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.