Beranda
Blogger
Median UI

Cara Mengubah Tampilan Widget Popular Post Median UI

tutorial mengubah tampilan widget popular post median ui

guntur.eu.org - Pasti setiap blog mempunyai widget Popular Post yang berfungsi untuk menampilkan postingan artikel yang paling banyak di baca, atau yang sedang populer pada waktu tertentu. Widget ini juga terdapat pada template Median UI.

Salah satu kekurangan template Median UI tidak bisa menampilan gambar di setiap artikel pada widget Popular Post, Fungsi gambar lebih bisa menjelaskan banyak hal dibanding sekedar tulisan judul.

Untuk saat ini saya sendiri masih belum menemukan solusi untuk memunculkan gambar Popular Post. Untuk itu saya memodifikasi sedikit bagian dari widget Popular Post ini agar lebih simpel dan enak di lihat.

Ada beberapa bentuk yang saya ganti, berikut ulasannya:

  1. Mengganti style Nomor Urut 

    2. Nomor urut Popular Post Median UI diawali dengan angka NOL (0). Agar lebih bagus saya ganti menjadi tanda Pagar (#)

  2. Menghapus Kategori/Label

    3. Label di Popular Post tidak begitu penting, jadi saya hapus saja.

  3. Menghapus Tanggal

    4. 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

    5. 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, bagaimana dengan kalian?

Sudah jelas 4 hal yang akan kita modifikasi.  Langsung saya simak tutorialnya.

Modifikasi Tampilan Widget Popular Post Median UI

Ikuti sesuai urutan tutorialnya.

Persiapan

  1. Buka Dashboard blogger.com
  2. Pilih menu Tema
  3. Klik icon segitiga terbalik
  4. Tekan Edit HTML
    pilih menu edit html

  5. Temukan kode /* Widget PopularPosts */

 A.Mengubah Nomor Urut

  1. Temukan kode dibawah ini
    2. .itemPopular .itemInner:before{flex-shrink:0; content:'0'
  2. Gantikan angka '0' menjadi tanda pagar '#' contoh:
    3. .itemPopular .itemInner:before{flex-shrink:0; content:'#'

B.Menghapus Kategori/Label

  1. Temukan kode dibawah ini
    2. .itemPopular .postHeader, .itemPopular .postLabel.sponsored{margin-left:32px;margin-bottom:5px}
  2. Lalu tambahkan kode ;display:none sebelum tutup kurung {}, contoh:
    3. .itemPopular .postHeader, .itemPopular .postLabel.sponsored{margin-left:32px;margin-bottom:5px;display:none}

C.Sembunyikan Tanggal & Komentar

  1. Temukan kode dibawah ini
    2. .itemPopular .itemInfo, .itemPopular .itemEntry{margin-top:10px}
  2. Tambahkan kode ;display:none sebelum tutup kurung {}, contoh:
    3. .itemPopular .itemInfo, .itemPopular .itemEntry{margin-top:10px;display:none}
  3. Jika sudah semua klik Simpan Tema
  4. dan Cek hasilnya, selesai.
Sesudah menyembunyikan beberapa bagian pada css populer post otomatis widget tampilan yang baru akan terlihat lebih simpel dan jika dilihat satu layar akan terlihat semua judulnya. 

Demikianlah untuk artikel tutorial mengubah tampilan widget popular post di Template Median UI semoga bermanfaat wassalam.

Posting Komentar