Popular Post merupakan salah satu widget bawaan Blogger yang berfungsi menampilkan daftar artikel paling populer atau paling banyak dikunjungi oleh pengunjung blog. Widget ini biasanya ditempatkan pada bagian sidebar untuk memudahkan pengunjung menemukan artikel menarik lainnya.
Secara default, thumbnail pada widget Popular Post memiliki ukuran yang relatif kecil. Ukuran tersebut terkadang kurang sesuai dengan desain template yang digunakan, terutama jika kita ingin menampilkan gambar dengan ukuran lebih besar dan proporsional.
Untuk mengubah ukuran thumbnail Popular Post, kebanyakan blogger menggunakan kode CSS. Namun, cara tersebut terkadang menimbulkan masalah, seperti gambar terlihat pecah, buram (blur), atau mengalami perubahan bentuk sehingga terlihat gepeng.
Sebenarnya, ada cara lain yang bisa digunakan untuk mengatur ukuran thumbnail Popular Post tanpa harus menambahkan CSS. Caranya adalah dengan mengedit kode HTML pada bagian widget Popular Post di dalam template Blogger.
Dengan metode ini, kita bisa menentukan ukuran lebar sekaligus rasio gambar sesuai kebutuhan. Selain lebih praktis, cara ini juga memungkinkan Blogger mengambil gambar dengan ukuran yang lebih sesuai dari sumbernya.
Mengapa Ukuran Thumbnail Popular Post Perlu Diubah?
Ukuran thumbnail memiliki pengaruh terhadap tampilan widget Popular Post secara keseluruhan. Jika ukurannya terlalu kecil, gambar mungkin terlihat kurang jelas, terutama ketika ditampilkan pada layar beresolusi tinggi.
Sebaliknya, jika thumbnail diperbesar hanya menggunakan CSS, gambar yang digunakan belum tentu memiliki resolusi yang cukup untuk ukuran tampilannya.
Beberapa masalah yang sering ditemukan antara lain:
Gambar terlihat buram: Thumbnail berukuran kecil dipaksa tampil lebih besar sehingga kualitas gambar menurun.
Gambar terlihat gepeng: Perubahan lebar dan tinggi tidak mengikuti rasio asli gambar.
Tampilan kurang proporsional: Ukuran gambar tidak sesuai dengan tata letak widget Popular Post.
Kualitas gambar kurang maksimal: Template menggunakan sumber thumbnail berukuran kecil meskipun gambar asli memiliki resolusi lebih besar.
Untuk menghindari masalah tersebut, kita bisa mengubah ukuran thumbnail langsung melalui fungsi resizeImage() yang tersedia pada template Blogger.
Cara Mengubah Ukuran Thumbnail Popular Post Tanpa CSS
Sebelum mengikuti tutorial ini, sebaiknya lakukan pencadangan template terlebih dahulu. Tujuannya agar kita bisa mengembalikan tema seperti semula apabila terjadi kesalahan saat mengedit kode HTML.
Berikut langkah-langkahnya:
1. Login ke Blogger
Pertama, silakan login ke akun Blogger menggunakan akun Google yang digunakan untuk mengelola blog.
2. Buka menu Edit HTML
Pada dashboard Blogger, pilih menu Tema, kemudian klik tanda panah atau menu di samping tombol Sesuaikan dan pilih Edit HTML.
Setelah itu, halaman editor HTML tema akan terbuka.
3. Lompat ke widget PopularPost1
Untuk mempermudah pencarian kode, gunakan fitur Lompat ke widget atau Jump to widget yang tersedia pada editor HTML Blogger.
Pilih widget PopularPost1.
Jika fitur tersebut tidak tersedia pada tampilan editor yang digunakan, tekan CTRL + F pada komputer, kemudian cari nama PopularPost1.
4. Cari kode resizeImage pada widget Popular Post
Selanjutnya, cari kode yang kurang lebih terlihat seperti berikut:
<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>Pada beberapa template, penulisan kode tersebut mungkin berbeda, misalnya menggunakan tanda kutip HTML " atau ditulis dalam satu baris.
Contoh lainnya:
<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>Perlu diperhatikan bahwa kode tersebut merupakan contoh. Struktur widget Popular Post pada setiap template Blogger bisa berbeda, sehingga pastikan kode yang diedit benar-benar berada di dalam widget Popular Post.
5. Ubah ukuran thumbnail sesuai keinginan
Setelah menemukan kode tersebut, perhatikan bagian berikut:
resizeImage(data:post.featuredImage, 72, "1:1")Ada dua bagian penting yang perlu dipahami, yaitu angka 72 dan rasio 1:1.
A. Mengubah lebar thumbnail
Angka 72 merupakan ukuran lebar gambar yang diminta melalui fungsi resizeImage(), dalam satuan piksel.
Jika ingin memperbesar thumbnail, Anda bisa menggantinya dengan angka yang lebih besar.
Contohnya:
resizeImage(data:post.featuredImage, 120, "1:1")Dengan perubahan tersebut, Blogger akan meminta thumbnail dengan lebar sekitar 120 piksel.
Beberapa contoh ukuran yang bisa digunakan:
72= lebar 72 piksel.100= lebar 100 piksel.120= lebar 120 piksel.150= lebar 150 piksel.200= lebar 200 piksel.
Silakan sesuaikan ukurannya dengan kebutuhan desain template.
B. Mengubah rasio thumbnail
Selain mengatur lebar, Anda juga bisa menentukan rasio atau perbandingan antara lebar dan tinggi gambar.
Berikut beberapa contoh rasio yang bisa digunakan:
| Rasio | Bentuk gambar |
|---|---|
1:1 | Persegi atau kotak |
4:3 | Persegi panjang |
16:9 | Persegi panjang lebar |
3:4 | Persegi panjang vertikal |
Misalnya, jika ingin thumbnail berbentuk persegi panjang dengan rasio 4:3, gunakan kode berikut:
resizeImage(data:post.featuredImage, 120, "4:3")Sedangkan jika ingin menggunakan rasio 16:9, ubah menjadi:
resizeImage(data:post.featuredImage, 120, "16:9")Dengan demikian, Anda bisa menyesuaikan bentuk thumbnail tanpa harus mengatur lebar dan tinggi gambar menggunakan CSS.
6. Simpan perubahan tema
Setelah selesai mengubah kode, klik tombol Simpan pada editor HTML Blogger.
Selanjutnya, buka halaman blog dan periksa tampilan widget Popular Post. Pastikan ukuran thumbnail sudah sesuai dengan perubahan yang dilakukan.
Jika tampilannya belum berubah, coba bersihkan cache browser atau buka blog melalui mode penyamaran (incognito).
Contoh Kode Mengubah Ukuran Thumbnail Popular Post
Agar lebih mudah dipahami, berikut beberapa contoh kode yang bisa langsung dijadikan referensi.
Thumbnail persegi ukuran 120 piksel:
resizeImage(data:post.featuredImage, 120, "1:1")Thumbnail persegi panjang ukuran 120 piksel dengan rasio 4:3:
resizeImage(data:post.featuredImage, 120, "4:3")Thumbnail lebar dengan rasio 16:9:
resizeImage(data:post.featuredImage, 160, "16:9")Ingat, angka pertama menentukan lebar gambar yang diminta, sedangkan angka kedua menentukan rasio gambar.
Apakah Cara Ini Bisa Digunakan pada Semua Template Blogger?
Tidak semua template Blogger menggunakan struktur kode Popular Post yang sama. Tutorial ini terutama ditujukan untuk template yang menggunakan fungsi resizeImage() pada bagian thumbnail widget Popular Post.
Pada template Blogger versi lama maupun template hasil modifikasi, kode tersebut mungkin memiliki susunan yang berbeda.
Jika tidak menemukan kode yang sama, jangan langsung mengganti bagian lain secara sembarangan. Periksa terlebih dahulu struktur widget Popular Post pada template yang digunakan.
Selain itu, perlu diketahui bahwa perubahan ukuran melalui resizeImage() hanya mengatur ukuran gambar yang diminta dari Blogger. Ukuran tampilannya di halaman blog tetap bisa dipengaruhi oleh pengaturan CSS template.
Kesimpulan
Mengubah ukuran thumbnail Popular Post Blogger tidak harus selalu menggunakan CSS. Kita bisa melakukannya secara langsung melalui kode HTML widget Popular Post dengan memanfaatkan fungsi resizeImage().
Cukup mengubah angka ukuran dan rasio gambar, kita sudah bisa menentukan bentuk thumbnail sesuai kebutuhan desain blog.
Cara ini bisa menjadi alternatif bagi Anda yang ingin mendapatkan ukuran thumbnail lebih sesuai tanpa harus menambahkan CSS baru ke dalam template Blogger.
Komentar
Posting Komentar