Cara Membuat Gambar Responsive dengan Kode CSS di Blog

Sedikit cerita tentang gambar yang responsive dan tidak responsive. Awal-awal saya mengenal dunia blogging sekitar tahun 2010 lalu saya tidak menemukan artikel seperti ini Cara Mudah Membuat Gambar Responsive di Blog. Di saat itu dunia blogging belum mengenal istilah responsive. Waktu itu saya belum serius dalam dunia blog, hanya untuk iseng dan menghabiskan waktu luang untuk belajar seluk beluk blog.

Seiring waktu berjalan, perkembangan zaman semakin maju, lahirlah smartphone, tablet, dan perangkat lainnya yang semakin canggih. Blog dan situs website membutuhkan penyesuaian diri, maka lahirlah istilah responsive dalam dunia blogger. Tempelate blog harus dibuat responsive agar bisa tampil menyesuaikan desktop perangkat, kalau tidak reseponsive maka blog atau website tampilannya akan jelek, terkadang terlalu lebar atau terlalu kecil.

Tampilan yang responsive ini berpengaruh juga pada isi postingan yaitu gambar dan video yang ada dalam postingan. Keduanya harus responsive, kalau tidak ya tampilannya akan jelek lagi.

Khusus untuk pengguna blogger terkadang template bawaan blog atau sebagian template blog gambarnya belum responsive. Seperti template yang saya gunakan ini. Saat pertama kali saya gunakan gambar yang ada di dalam postingan blog belum responsive sesuai dengan beberapa browser sehingga saya harus sedikit menambahkan kode CSS untuk membuat gambarnya menjadi responsive.

Cara Pasang Kode CSS Gambar Responsive di Blog

Pada dasbord blog klik tab "Template" kemudian klik tombol "Edit HTML, kemudian copy dan pastekan kode CSS di bawah ini sebelum kode ]]></b:skin> atau </style>.

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

Cara membuat gambar sangat mudah kan? Karena hanya dengan menempatkan kode css di atas ke dalam html blog saja gambar sudah menjadi responsive, semoga bermanfaat.