Cara Membuat Widget Artikel Populer Keren di Blog

Agar blog anda lebih terlihat keren maka dibutuhkan editing pada template. Sesuai tema diatas bagaimana cara membuat widget artikel populer (popular post) agar terlihat keren dan dapat membuat pengunjung tertarik untuk melihat artikel pada bagian widget populer pada blog anda. Banyak penyebab mengapa anda harus melakukan sedikit optimasi pada widget-widget tertentu.

Alasan klasik mereka ingin merubah tampilan artikel populer salah satunya karena bosan melihat yang itu-itu saja atau ingin desain blognya menjadi lebih tampil elegan. Mengganti widget berarti anda harus mengganti kode CSS tertentu yang berhubungan dengan artikel populer. Setiap template memiliki kode CSS dan HTML yang berbeda-beda, namun hampir seluruhnya dalam kode CSS menggunakan judul yang hampir sama.

Mengganti kode widget popular post tidak akan memberatkan loading blog anda. Tergantung dengan pengaturan anda sendiri. Dalam menu Tata Letak blogger sendiri terdapat pengaturan apakah artikel populer anda akan ditampilkan tanpa gambar, judulnya saja atau judul berikut snipet isi postingan. Jika anda belum paham silahkan menuju Tata Letak pilih Widget Popular Post (tergantung judul yang anda berikan) dan tinggal anda pilih tampilan mana yang anda sukai berapa artikel yang ingin tampil dan kemudian SIMPAN.

Kode CSS Widget Artikel Populer 

Saya akan memberikan contohnya saja jenis widget artikel populer yang ada dalam blog ralabuma ini dan di ambil dari sebuah website penyedia template bung frangki.

Ganti Kode CSS artikel populer (popular post) dengan kode seperti dibawah ini :

/* Popular Post */

.PopularPosts ul{font-family:'Work Sans', sans-serif;list-style:none;margin:0 auto;padding:0;overflow:hidden;width:100%}

.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img {margin:0;padding:0;list-style:none;border:none;background:none;outline:none;}

.PopularPosts ul li {margin:0 auto 10px;position:relative;overflow:hidden;line-height:1em!important;list-style:none;border-top:1px solid #ddd;padding:20px 0 0}

.PopularPosts ul li a:hover {color:#999!important;}

.PopularPosts li a{color:#333 !important;font-weight:700 !important;font-size:16.40px !important;list-style:none;line-height:1.2em;display:block;overflow:hidden}

.PopularPosts ul li img {width:90px;height:90px;float:left;display:inline-block}

.PopularPosts .item-thumbnail {display: flex;align-items: center;justify-content: center;width:90px;height:90px;border-radius:99em;overflow:hidden;float:left;margin:-10px 20px 0 0!important;position:relative}

.PopularPosts .item-snippet{display:block;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-size:12px;color:#aaa;overflow:hidden;margin:4px 0 0;display:none}

Untuk memudahkan pencarian kode CSS cukup tekan CTRL+F pada keyboard dihalaman edit html template anda dan ketikan kata popular post.

Setelah anda ganti kode tersebut kemudian simpan. 

Dalam mengedit template sebaiknya anda backup terlebih dahulu, atau ketika anda simpan jangan keluar dari halaman edit html terlebih dahulu. Lihat hasilnya dahulu jika tidak sesuai anda cukup tekan CTRL+Z dan Kode CSS yang diganti tadi akan kembali seperti semula dan SIMPAN.

Ketika anda berhasil menerapkannya berarti anda bisa mencari widget artikel populer yang anda sukai di penyedia template lainnya. Terima kasih anda sudah membaca bagaimana cara membuat widget artikel populer (popular post), silahkan berkomentar jika belum ada yang di mengerti.