Nov 14, 2017

Cara Memperbaiki Gambar Widget Popular Post Yang Blur

Memperbaiki Gambar Widget Popular Post Yang Buram

Postingan ini terbit berawal dari blog dibalikseo ini yang saat tadi pagi saya buka ada yang aneh pada tampilan thumbnail/gambar di widget Popular Posts. Terlihat pada gambar tersebut blur buram dan tidak jelas, akhirnya saya coba otak atik template dan ketemu sumber permasalahannya adalah pada ukuran thumbnail/gambar pada popular posts.

Dan ini ternyata memang ada hubungannya dengan sistem Blogspot Blogger Google yang telah di updated beberapa waktu lalu oleh Google sehingga mempengaruhi tampilan dan ukuran pada widget popular posts. Ini berpengaruh bagi template blogger yang menggunakan tampilan widget popular post yang lebar, namun bagi widget popular posts yang ukurannya kotak atau persegi empat mungkin tidak berpengaruh.

Bagi sobat yang kebetulan mengalami hal yang sama dan mau memperbaikinya masalah ini, maka perlu dilakukan perubahan kecil pada script widget Popular Post tersebut. Caranya ialah sebagai berikut. Cara Memperbaiki Gambar Widget Popular Post Yang Blur.

Langkah Pertama
Silahkan login ke Blogger lalu masuk ke dashboard dan klik Template >> Edit HTML. Kemudian silahkan Klik Menu Lompat ke Widget >> Popular Posts1 seperti pada gambar dibawah ini.

popular posts1

Langkah Ke Dua

Silahkan cari kode dibawah ini

<img alt='' border='0' expr:src='resizeImage(data:post.thumbnail, 72, &quot;1:1&quot;)'/>

Atau seperti ini

<b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>

Setelah ketemu perhatikan kode yang ditandai 72 dan 1:1, silahkan rubah menjadi 200 atau 300 dan 2:1. yang nantinya akan jadi seperti ini.

<img alt='' border='0' expr:src='resizeImage(data:post.thumbnail, 200, &quot;2:1&quot;)'/>

Atau seperti ini juga

<b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 200, &quot;2:1&quot;)                                  : data:post.thumbnail' var='image'>

Setelah selesai silahkan SAVE.

Jika masih belum bisa coba cari kembali kode mirip seperti diatas dan disesuaikan mengingat karakter di setiap template berbeda-beda. Dan selesai, semoga bermanfaat.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.