Popular post merupakan cuplikan postingan terbanyak yang sering dilihat oleh pengunjung dan kebanyakan memakai thumbnail kecil yang diambil dari gambar pertama pada postingan.
Saat kita memodifikasi ukuran popular post dengan ukuran yang kita inginkan dengan CSS maka sering kali gambar thumbnail akan terlihat blur atau terlihat gepeng.
Sebenarnya ada cara lain untuk resize atau merubah ukuran thumbnail popular post tanpa menggunakan CSS, salah satunya dengan mengedit kode HTML pada widget popular itu sendiri dan berikut panduannya.
Cara merubah ukuran thumbnail popular post tanpa CSS
1. Silahkan anda login di blogger com.2. Selanjutnya anda klik Tema, Edit HTML.
3. Selanjutnya anda klik lompat ke widget PopularPost1.
4. Selanjutnya anda cari kode seperti ini
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image'/>
</b:with>
atau
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image'/>
</b:with>
Cara merubah ukuran thumbnail:
- Perhatikan angka 72, itu adalah lebar thumbnail pada popular post yang ukurannya 72 piksel, anda bisa merubah angkanya, contoh misalnya menjadi 120.
- Sedangkan angka 1:1 adalah perbandingan rasio antara lebar dan tinggi thumbnail yang artinya thumbnail akan di kompres secara otomatis menjadi ukuran kotak bujur sangkar, mengikuti lebar thumbnail.
- Anda juga dapat menggantinya dengan ukuran rasio lainnya, contoh misalnya anda ingin thumbnail berbentuk persegi panjang, maka ubahlah angkanya menjadi 4:3.
- Anda juga dapat menggantinya dengan satuan piksel, contoh misalnya menjadi 120px:120px atau 120px:900px dan seterusnya.
Cara ini saya terapkan pada tema bawaan blogger versi lama yang belum responsive, semoga bermanfaat.
No comments:
Post a Comment