3 Cara Agar Gambar Postingan Blogger Menjadi Responsif

Pada awalnya, pengaturan gambar postingan agar responsif tidak ada masalah dengan kodenya. Namun suatu hari saat memeriksa tampilan melalui perangkat mobile koq gitu. Seolah-olah kode CSS pengaturan gambar postingan Blogger agar responsif tidak berlaku.

Saya kemudian mencoba mengingat-ingat sesuatu tentang perubahan apa yang sudah dilakukan. Khususnya theme blogger utama ini yang menggunakan framework Bootstrap. Hasilnya, berdasarkan ingatan yang sudah tidak tajam lagi sejauh ini tidak diketemukan tersangka utama.

Image by Mudassar Iqbal from Pixabay

Kecuali perubahan link yang mengarah ke server CDN Bootstrap yang saat ini versi 5 (terbaru). Dan bisa jadi juga ada masalah lain yang tidak diketahui yang terluput dari pengamatan? Namun jika ini sumber masalahnya, haruskah kita turunkan lagi ke versi sebelumnya? 

Pertanyaan-pertanyaan di atas terlintas dalam benak saya sebagai seorang blogger. Dan barangkali, termasuk Anda yang mungkin sedang mengalami masalah serupa ketika membuat sebuah template blogger dari nol. Lantas apa yang bisa dilakukan? Barangkali kode-kode di bawah ini jawabannya.

3 Cara Agar Gambar Postingan Blogger Menjadi Responsif

Tampilan blog yang responsif pada tiap perangkat merupakan idaman semua orang. Sayangnya, tidak semua orang bisa dengan mudah membuat theme sendiri dari nol yang memiliki fitur tersebut. Sehingga wajar jika pemula seperti saya harus merasakan perjuangan dalam mewujudkan hal tersebut.

Oleh karena itu, di bawah ini kami sajikan 3 (tiga) macam kode agar gambar postingan menjadi responsif. Kode-kode ini dimulai dengan kode CSS yang umum digunakan oleh Blogger sebagaimana terlihat pada poin pertama. Dan Saya sendiri termasuk pernah menggunakannya.

Cara 1: Kode CSS Umum Agar Gambar Postingan Auto Responsif

Kita mulai dengan kode pertama yang biasa digunakan para blogger di template mereka. Kode ini termasuk kode yang lumrah dan umum yang biasa digunakan mayoritas template blogger. Dan Saya termasuk pernah membuat tutorial untuk mengatur gambar blog agar responsif dengan kode ini.

Berikut ini kodenya yang diletakan sebelum tag  ]]></b:skin> pada template blogger Anda.

.post-body img { max-width: 100%; height: auto }

Dan untuk menguji tampilan terbaik sesuai template blogger Anda silahkan ubah sesuaikan nilai persentase maksimal lebar gambarnya. Misalkan max-width: 90%; atau kurang dari itu.

Cara 2: Kode Gambar Responsif Khusus Theme Blogger dengan Bootstrap 5

Ini adalah cara kedua jika kode pertama sebagaimana diulas di atas sudah digunakan namun ternyata tidak berlaku. Sebagaimana ini saya alami sendiri sampai-sampai tampilan blog menjadi berantakan. Bahkan tidak tanggung-tanggung, kejadian ini sampai berlangsung satu tahun.

Hingga akhirnya saya temukan kode yang cocok untuk template blogger ini yang dibangun dengan Bootstrap 5. Bagi teman-teman yang memiliki masalah yang sama, silahkan gunakan kode di bawah ini. Caranya, copy dan paste kode di bawah ini pada bagian kode CSS di template blog Anda.

img, svg, iframe { max-width:100% } img { height:auto; object-fit:cover; }

Berdasarkan pengalaman pribadi yang baru saja terjadi saat ini, kode di atas saya tempatkan persis setelah <b:skin><![CDATA[/* dengan hasil yang bisa teman-teman lihat sendiri di blog ini.

Cara 3: Kode Gambar Responsif yang Belum Saya Mengerti Peletakannya

Ini adalah cara ketiga yang sengaja saya tulis untuk menambah referensi pribadi. Dengan menuliskannya di catatan blog ini secara tidak langsung telah menyediakan pilihan lain jika ternyata dua cara yang ditempuh tidak berhasil. Dan berikut ini kodenya yang berfungsi untuk mengatur gambar responsif.

.post-body img ,svg{ max-width: webkit-fill-available!important; height:auto; imageRatio: "1:1" }

Namun pada praktek penggunaan kode di atas ini hanya diterapkan pada template blogger yang dibangun dengan Bootstrap versi 5. Dan hasil yang didapat adalah gambar yang terlihat dalam artikel tetap tidak berubah responsif mengikuti perangkat pengguna. Mungkin untuk template lain bisa dicoba.

Kesimpulan

Pada akhirnya, kode yang cocok untuk template blogger yang dibangun dengan Bootstrap 5 yaitu kode nomor 2. Dan kode di atas sejatinya didapat dari template blogger lain yang sama-sama menggunakan mesin Bootstrap pada platform Blogger.

Namun ini hanya pengalaman pribadi saya saja yang sifatnya terbatas yang pastinya belum tentu sama dengan pengalaman orang lain. Lalu bagaimana dengan pengalaman teman-teman blogger sekalian? Apakah memiliki masalah yang sama dengan solusi yang tidak jauh berbeda? 

Silahkan tinggalkan komentar jika ada yang punya pengalaman lainnya.

Baca Juga