Cara Membuat Gambar Responsive pada Blogger

Ketika upload gambar ke Blog khususnya dengan platform Blogspot/Blogger, namun ketika laman browser disempitkan atau diakses dari perangkat seluler, gambar malah menjadi gepeng atau tidak proporsional seperti contoh gambar di bawah:
Padahal seharusnya seperti di bawah ini: 
Artinya blog tersebut tidak mendukung gambar yang responsif. Dilihat dari segi estetika, tentu hal ini sangat mengganggu, dan tentunya akan mengurangi penilaian baik dari para pembaca tentang blog kita. 
Beberapa template blogger memang tidak mendukung gambar renponsif, sehingga si pemilik blog harus menambar beberapa setelan agar template blog-nya mendukung gambar responsif. 
Tenang, caranya sangat sederhana dan mudah, koq. Cukup dengan menambahkan kode CSS di bawah ini ke setelah template blog: 
.post-body img { width: 100%; height: auto }

Caranya mudah, yuk simah langkah-langkahnya: 

1. Pertama, pada dashboard blogger pilih menu 'Tema' lalu pilih 'Sesuaikan



2. Kemudian pilih tab 'Lanjutkan' lalu pilih 'Tambahkan CSS

3. Pada kolom 'Tambahkan CSS' copy dan paste kode CSS yang sudah dilampirkan di atas, kemudian pilih Save/Simpan.

Dan sekarang gambar sudah responsive dan tidak gepeng lagi saat diakses di perangkat seluler. 

Sekian langkah-langkah membuat template blog agar mendukung gambar yang responsif. Terima kasih. 

3 komentar: