Cara membuat gambar pada blog menjadi responsive

Cara membuat gambar pada blog menjadi responsive

Membuat gambar menjadi responsive memiliki tujuan agar semua gambar yang berada didalam artikel kita berukuran sama dan enak dipandang oleh pengunjung, mungkin Anda pernah melihat sebuah blog yang menampilkan gambar yang kurang enak dipandang entah itu karena ukuran gambar terlalu besar atau ukuran gambar terlalu kecil.

Belum lagi jika kita membuka blog tersebut pada perangkat mobile yang kebanyakan memiliki ukuran layar yang kecil seperti 600px, 400px, dan 350px tentunya jika gambar yang dimuat terlalu besar ini akan mengganggu pembaca untuk melihat dan memahami gambar yang ada.

1. Kode CSS Universal

---

Untuk menghindari masalah pada gambar seperti yang telah saya utarakan tadi diatas kita akan menambahkan code CSS pada blog atau bisa dibilang code style agar gambar menyesuailan dengan ukuran layar yang memuatnya dan berikut adalah code CSS yang harus anda masukan kedalam edit HTML pada blog :

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

Keterangan : 

Max-width: 95% berarti ukuran lebar semua gambar diubah menjadi 95% dari ukuran maksimal posting.

Height:auto berarti bahwa ukuran tinggi dari gambar akan menyesuaikan dengan tinggi gambar yang di atur pada saat menulis posting. 

Jika code css diatas tidak berhasil silahkan gunakan code css berikut :

.post-body img {max-width:100%;height:auto;}
.post-body img {height:auto;margin-bottom:2px;opacity:1;transition:all .6s ease;}
.post-body img:hover {opacity:0.97;}  

2. Kode CSS Targeted

---

Kenapa saya tulis code css targeted sebenarnya code css kali ini akan menargetkan ukuran gambar pada tiap ukuran layar device, code nya adalah sebagai berikut :

@media screen and (min-width:1300px) {.post-body img {max-width:100%;height:auto;}
.post-body img {height:auto;margin-bottom:2px;opacity:1;transition:all .6s ease;}
.post-body img:hover {opacity:0.97;}}
@media screen and (min-width:1280px) {.post-body img {max-width:100%;height:auto;}
.post-body img {height:auto;margin-bottom:2px;opacity:1;transition:all .6s ease;}
.post-body img:hover {opacity:0.97;}}
@media screen and (min-width:1024px) {.post-body img {max-width:100%;height:auto;}
.post-body img {height:auto;margin-bottom:2px;opacity:1;transition:all .6s ease;}
.post-body img:hover {opacity:0.97;}}
@media screen and (min-width:1000px) {.post-body img {max-width:100%;height:auto;}
.post-body img {height:auto;margin-bottom:2px;opacity:1;transition:all .6s ease;}
.post-body img:hover {opacity:0.97;}}
@media screen and (min-width:990px) {.post-body img {max-width:100%;height:auto;}
.post-body img {height:auto;margin-bottom:2px;opacity:1;transition:all .6s ease;}
.post-body img:hover {opacity:0.97;}}
@media screen and (min-width:800px) {.post-body img {max-width:100%;height:auto;}
.post-body img {height:auto;margin-bottom:2px;opacity:1;transition:all .6s ease;}
.post-body img:hover {opacity:0.97;}}
@media screen and (min-width:768px) {.post-body img {max-width:100%;height:auto;}
.post-body img {height:auto;margin-bottom:2px;opacity:1;transition:all .6s ease;}
.post-body img:hover {opacity:0.97;}}
@media screen and (min-width:600px) {.post-body img {max-width:100%;height:auto;}
.post-body img {height:auto;margin-bottom:2px;opacity:1;transition:all .6s ease;}
.post-body img:hover {opacity:0.97;}}
@media screen and (min-width:480px) {.post-body img {max-width:100%;height:auto;}
.post-body img {height:auto;margin-bottom:2px;opacity:1;transition:all .6s ease;}
.post-body img:hover {opacity:0.97;}}
@media screen and (min-width:380px) {.post-body img {max-width:100%;height:auto;}
.post-body img {height:auto;margin-bottom:2px;opacity:1;transition:all .6s ease;}
.post-body img:hover {opacity:0.97;}}
@media screen and (min-width:240px) {.post-body img {max-width:100%;height:auto;}
.post-body img {height:auto;margin-bottom:2px;opacity:1;transition:all .6s ease;}
.post-body img:hover {opacity:0.97;}}

3. Cara Pemasangan

---

Bagi Anda yang sudah mengetahui cara pemasangan code css pada blogger silahkan abaikan saja langkah ketiga ini.

1. Silahkan login menuju akun blogger anda dan menuju Template.
2. Silahkan pilih Edit HTML.
3. Pada kotak html tekan tombol Ctrl+F lalu cari code "]]></b:skin>"
4. Pastekan code CSS diatas code "]]></b:skin>"
5. Silahkan save dan lihat hasilnya.

Setelah step ke 3 dilakukan seharusnya semu gambar yang terdapat pada blog milik anda sudah menjadi responsive. selamat mencoba.