Cara Memperbaiki Gambar Buram di Template Blogger.

Gambar yang buram di template Blogger sering kali disebabkan oleh penggunaan ukuran gambar yang terlalu kecil. Secara default, gambar yang diambil dari Blogger atau Google Photos sering kali memiliki parameter seperti s72-c, s320, atau w320, yang membatasi resolusi gambar. Untuk memperbaiki masalah ini, kita bisa menggunakan jQuery untuk mengganti ukuran gambar secara otomatis dengan resolusi yang lebih tinggi.

---

1. Memperbaiki Gambar Buram di .topikXML-left .overlay img

Jika gambar di dalam elemen .topikXML-left .overlay img terlihat buram, kita bisa mengganti ukuran gambar menjadi s1600 atau lebih besar. Berikut adalah kode jQuery yang bisa digunakan:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    $('.topikXML-left .overlay img').attr('src', function(i, src) {
        return src.replace(/s72-c|s320|w320/g, 's1600'); // Mengubah ukuran ke s1600
    });
});
//]]>
</script>

Penjelasan Kode:

• Menggunakan jQuery untuk mencari semua gambar dalam .topikXML-left .overlay img.
• Mengubah URL gambar yang memiliki parameter ukuran kecil (s72-c, s320, w320) menjadi s1600 untuk kualitas lebih baik.

---

2. Memperbaiki Gambar Buram di a.slider-image

Beberapa template Blogger menggunakan background-image pada elemen <a class="slider-image">. Jika gambar dalam slider terlihat buram, kita bisa menggantinya dengan resolusi yang lebih tinggi menggunakan kode berikut:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    $('a.slider-image').each(function() {
        var bgImage = $(this).css('background-image');
        if (bgImage && bgImage.includes('url')) {
            var imageUrl = bgImage.replace(/url\(["']?|["']?\)/g, ''); // Ambil URL gambar saja
            var newImageUrl = imageUrl.replace(/s72-c|s320|w320/g, 's1600'); // Ubah ukuran ke s1600
            
            $(this).css('background-image', 'url(' + newImageUrl + ')'); // Terapkan kembali dengan ukuran baru
        }
    });
});
//]]>
</script>

Penjelasan Kode:

• Mencari semua elemen a.slider-image yang menggunakan background-image.
• Mengambil URL dari background-image dan menghapus bagian url(...).
• Mengganti ukuran gambar ke s1600 agar lebih tajam.
• Menerapkan kembali background-image dengan URL baru.

---

3. Mengapa Memilih s1600?

• s1600 memberikan resolusi yang cukup tinggi tanpa membuat loading halaman terlalu berat.
• Jika masih buram, bisa diganti dengan s2048 atau s0 untuk ukuran asli gambar.

---

4. Cara Mengecek Apakah Kode Berhasil

1. Gunakan Inspect Element (F12) di Browser

   • Klik kanan pada gambar → Pilih Inspect.
   • Cek apakah URL gambar sudah berubah menjadi s1600 atau lebih besar.

2. Lakukan Hard Refresh (Ctrl + Shift + R)

   • Ini untuk memastikan browser tidak menggunakan cache lama.

3. Coba Ganti s1600 dengan s2048 atau s0

   • Jika masih buram, ubah semua s1600 dalam kode menjadi s2048 atau s0 untuk gambar asli.

---

Kesimpulan

Menggunakan jQuery untuk memperbaiki gambar buram di Blogger adalah solusi yang efektif dan mudah diterapkan. Dengan mengganti ukuran gambar secara otomatis ke resolusi yang lebih tinggi, tampilan blog menjadi lebih profesional dan menarik. Semoga artikel ini bermanfaat! 🚀