Cara Memodifikasi Popular Post Median UI agar Lebih Sederhana

Arsipbiru.com - Popular Post adalah salah satu widget yang berfungsi untuk menampilkan artikel yang paling banyak di baca. Hampir semua blog menyematkan widget ini. Bahkan para desainer template pun menambahkan widget ini dalam karyanya. Tujuannya tidak lain adalah agar menarik minat pengunjung untuk membaca artikel terpopuler yang tampil dalam suatu blog. Berbagai template blogger yang beredar telah menyediakan fitur ini di dalamnya, termasuk di antaranya adalah template karya Muhammad Maki (JagoDesain), Median UI.

Sayangnya, template Median UI tidak bisa menampilkan gambar di setiap artikel pada widget Popular Post-nya. Mungkin saja widget tersebut dibuat seperti itu guna meningkatkan kecepatan loading blog. Memang bagus sih, jadi keliatan user interface (UI)-nya. Di sisi lain, justru gambar memiliki kesan tersendiri dalam menyampaikan isi pokok dari artikel tersebut. Oleh karena itu, gambar lebih banyak menjelaskan berbagai hal dibanding sekedar tulisan judul artikel.

Namun, Popular Post pada template Median UI, khususnya Median UI versi 1.5, terlihat masih kurang nyaman bagi pengunjung. Terlihat disitu masih menampilkan label blog, tanggal posting, dan komentar.

Nah, pada pertemuan kali ini saya akan membagikan tutorial terkait bagaimana cara memodifikasi Popular Post Median UI agar lebih sederhana. Tutorial kali ini saya dapatkan ketika berkunjung di blog Saifullah. Popular Post yang saya bagikan memiliki keunggulan tersendiri, yaitu lebih sederhana dan mudah dibaca. Gaya nomor urut yang semula terdapat angka nol (0) di depannya, kini diubah menjadi tanda pagar (#). Selain itu, label blog, tanggal posting dan komentar dihilangkan agar lebih nyaman. Namun, perlu diketahui bahwa ikon komentar pada widget Popular Post Median UI 1.5 akan mempengaruhi SEO Score jika dihilangkan.

Perubahan pada Popular Post Median UI

Ada beberapa hal yang berubah, jika Anda mengikuti tutorial ini di antaranya sebagai berikut.

Gaya Nomor Urut

Nomor urut Popular Post Median UI umumnya diawali dengan angka nol (0), mulai 01, 02, 03, dan seterusnya. Namun, agar terlihat lebih keren, angka nol tersebut diubah menjadi tanda pagar (#). Jadi, gaya urutannya tidak lagi menampilkan angka nol di depannya, melainkan tanda pagar, mulai #1, #2, #3, dan seterusnya.

Label / Kategori

Jika Anda mengikuti tutorial ini, Anda tidak akan lagi melihat label / kategori. Bukan karena dihapus, melainkan disembunyikan agar tidak tampil pada widget Popular Post. Hal ini karena label / kategori pada Popular Post kurang begitu penting, sehingga dihilangkan. Anda pun bisa mengembalikannya seperti semula dengan menghapus nilai pada property CSS tertentu.

Tanggal Posting

Selain label dihilangkan, Anda juga tidak akan lagi melihat tanggal posting pada Popular Post Median UI. Meskipun terdapat pro dan kontra terkait tanggal posting di Popular Post. Namun, tetap saja tanggal posting akan mempengaruhi minat pengunjung untuk membaca artikel tersebut.

Tanggal posting yang sudah terlalu berumur, bisa menyebabkan pengunjung ragu untuk membukanya. Bisa jadi mereka takut artikel tersebut tidak lagi relevan dengan kondisi sekarang.

Jumlah Komentar

Selain label dan tanggal posting yang dihilangkan, Anda juga tidak akan lagi melihat jumlah komentar pada Popular Post. Hal ini dikarenakan jika tanggal posting dihilangkan akan menyebabkan hal lain pada Popular Post, yaitu kurang rapi. Jika hal tersebut masih ditampilkan tentu akan mengurangi kenyamanan pengunjung. Di sisi lain, ikon komentar yang dihilangkan dari Popular Post tentunya berpengaruh secara signifikan terhadap SEO Score pada template Median UI 1.5.

Jadi, ada 4 hal yang dimodifikasi pada Popular Post di tutorial kali ini. Jika Anda tertarik, silahkan ikuti langkah-langkahnya dengan baik berikut ini.

Cara Memodifikasi Popular Post Median UI agar Lebih Sederhana

1. Pertama, silahkan masuk ke dashboard Blogger masing-masing.

2. Selanjutnya, pilih menu Tema > klik ikon segitiga terbalik di samping menu Sesuaikan > klik Edit HTML.

3. Cari kode /* Widget PopularPosts */

4. Jika sudah ketemu, silahkan lanjutkan langkah berikutnya di bawah ini.

A. Mengganti Gaya Nomor Urut

Cari kode berikut ini:

.itemPopular .itemInner:before{flex-shrink:0; content:'0'

Ganti angka '0' menjadi '#'. Nanti hasilnya akan seperti berikut ini:

.itemPopular .itemInner:before{flex-shrink:0; content:'#'

B. Menghilangkan Label / Kategori

Cari kode berikut ini:

.itemPopular .postHeader, .itemPopular .postLabel.sponsored{margin-left:32px;margin-bottom:5px}

Tambahkan kode ;display:none sebelum tutup kurung. Hasilnya kurang lebih seperti berikut ini:

.itemPopular .postHeader, .itemPopular .postLabel.sponsored{margin-left:32px;margin-bottom:5px;display:none}

C. Menyembunyikan Tanggal dan Komentar

Cari kode berikut ini:

.itemPopular .itemInfo, .itemPopular .itemEntry{margin-top:10px}

Tambahkan kode ;display:none sebelum tutup kurung. Hasilnya kurang lebih seperti berikut ini:

.itemPopular .itemInfo, .itemPopular .itemEntry{margin-top:10px;display:none}

5. Jika semua perubahan telah dilakukan, silahkan klik Simpan Tema dan lihat hasilnya. Setelah menyembunyikan beberapa bagian pada Popular Post Median UI, maka tampilan yang baru akan terlihat lebih sederhana. Dalam satu layar bisa terlihat semua judulnya, sehingga dapat menghemat tempat.

Demikianlah tutorial terkait bagaimana cara memodifikasi Popular Post Median UI agar lebih sederhana. Jika ada saran dan masukan, silahkan berkomentar di bawah ini. Terima kasih atas kunjungannya dan semoga bermanfaat.

Sumber:

Saifullah