Cara Membuat Semua Gambar Di Blog Menjadi Responsive

Menyajikan gambar yang responsive penting bagi pengunjung yang menggunakan perangkat seluler. Responsive disini membuat gambar yang ukurannya besar jika dibuka dengan mobile bisa mengikuti ukuran layar pengguna. Jadi pengunjung tidak merasa kesulitan untuk melihat gambar karena ukuran gambar yang besar selain itu gambar menjadi lebih kecil dan tidak terpotong.

Mengatur gambar menjadi responsive maka membuat width/lebar gambar menyusut mengikuti lebar layar pengguna serta height gambar mengikuti lebar layar pengguna sesuai dengan perbandingan antara width dan height desktop dan di mobile.

Cara Membuat Responsive

Dengan cara ini maka akan membuat semua gambar di blog anda menjadi responsive. Termasuk gambar di home page namun biasanya gambar di home page sudah diatur responsive. Cara ini bisa digunakan di semua template. Dengan mengatur dan menambahkan css responsive maka gambar bisa menjadi responsive. Berikut ini langkahnya:

1. Buka blogger,Template → Edit HTML

2. Salin kode dibawah ini lalu letakkan diatas kode ]]></b:skin> atau </style>

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

3. Simpan template.

Sekarang buka blog anda dengan perangkat seluler untuk mengecek apakah gambar sudah responsive atau belum. Jika gambar yang ada di artikel anda belum responsive,maka silakan edit artikel tersebut. Buka pada mode html dan lihat gambar tersebut dalam html mode. Cari kode seperti ini didalam mode html artikel anda 👇

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhldm1A9k2NswnrrxCcAvP6t2xrG5pjqyvxaYeV5ba74zhxujEz5u24jiD2JXi7VBB10UoFu6LWfTKbMSatVaWikGfXlekxkVxTeKPj6iIrjB5J4243mkrjXbITL2XOqa0eO0yUnyWVx8g/s1600/Gambar+responsive.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="508" data-original-width="676" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhldm1A9k2NswnrrxCcAvP6t2xrG5pjqyvxaYeV5ba74zhxujEz5u24jiD2JXi7VBB10UoFu6LWfTKbMSatVaWikGfXlekxkVxTeKPj6iIrjB5J4243mkrjXbITL2XOqa0eO0yUnyWVx8g/s400/Gambar+responsive.jpg" width="400" /></a>

Silakan hapus kode yang berwarna merah karena kode tersebut yang membuat gambar diartikel anda menjadi responsive. Gambar tidak perlu diberi margin karena sudah dibuat responsive. Cukup sekian tutorial yang bisa saya bagikan semoga bermanfaat.