Latest News

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 kalau dibuka dengan mobile mampu mengikuti ukuran layar pengguna. Makara pengunjung tidak merasa kesulitan untuk melihat gambar alasannya yakni ukuran gambar yang besar selain itu gambar menjadi lebih kecil dan tidak terpotong.

Menyajikan

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 mampu digunakan di semua template. Dengan mengatur dan menambahkan css responsive maka gambar mampu menjadi responsive. Berikut ini langkahnya:

1. Buka blogger,Template → Edit HTML

2. Salin aba-aba dibawah ini lalu letakkan diatas aba-aba ]]></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 aba-aba ibarat ini didalam mode html artikel anda 👇

<a href="https://3.bp.blogspot.com/-7OI-S5gi7f0/WWHjCebIUrI/AAAAAAAABWM/2IqqcCCHeLotA-BDuoyIINuOxF54GrFTACLcBGAs/s1600/Gambar%2Bresponsive.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="508" data-original-width="676" height="300" src="https://3.bp.blogspot.com/-7OI-S5gi7f0/WWHjCebIUrI/AAAAAAAABWM/2IqqcCCHeLotA-BDuoyIINuOxF54GrFTACLcBGAs/s400/Gambar%2Bresponsive.jpg" width="400" /></a>

Silakan hapus aba-aba yang berwarna merah alasannya yakni aba-aba tersebut yang membuat gambar diartikel anda menjadi responsive. Gambar tidak perlu diberi margin alasannya yakni sudah dibuat responsive. Cukup sekian tutorial yang mampu aku bagikan agar bermanfaat.