Trik Membuat Gambar Responsive pada Postingan Blog

Trik Membuat Gambar Responsive pada Postingan Blog - Penambahan sebuah gambar pada postingan sangat dianjurkan supaya visitors tertarik membaca konten. Selain itu fungsi utama disematkannya gambar tersebut adalah agar konten yang disajikan bisa menjadi lebih informatif, variatif dan visitors lebih mudah untuk memahami apa yang sedang dibagikan.

Coba bayangkan jika di dalam postingan hanya berisi tulisan saja, tentu akan terasa membosankan. Oleh karena itu sebisa mungkin menambahkan gambar pada setiap konten

Memilih Gambar Relevan 

Usahakan memilih gambar yang relevan dan memiliki kualitas gambar yang baik, agar gambar tidak pecah / noise ketika di pasang dalam postingan blog dengan ukuran large atau x-large. 

Tapi masalahnya saat kita menggunakan gambar dengan kualitas yang bagus / ukuran x-large, biasanya gambar tersebut akan melebihi batas lebar konten. 

Apalagi jika belum menggunakan template blog yang responsive, tentu gambar yang ada di dalam postingan akan menjadi berantakan dan menjadi tidak rapi saat di-akses melalui handphone atau android. 

Berikut ini adalah cara untuk mengatasi masalah tersebut, tips berikut ini adalah bagaimana cara membuat gambar pada konten blog menjadi responsive secara otomatis

baca juga Cara Mudah Mengembalikan Blogspot.co.id menjadi dot.com

Cara membuat gambar di postingan menjadi responsive

Menggunakan template yang sudah responsive sangat dianjurkan karena bisa meningkatkan user experience para visitors. Sebenarnya untuk membuat gambar pada postingan blog otomatis menjadi responsive caranya cukup mudah, tinggal menambahkan kode csssaja di dalam template. 

Kode css ini berfungsi untuk mengatur supaya lebar gambar bisa menyesuaikan secara otomatis sesuai dengan ukuran layar device yang sedang mengaksesnya. 

Caranya yaitu : 

1. Login terlebih dahulu ke dalam dashboard blogger. 

2. Masuk ke menu template > edit templates 

3. Kemudian pastekan kode css berikut ini tepat di atas kode

]]><b/skin> 

kode CSSnya

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

4. Kemudian klik save

Sekarang coba akses blognya lewat HP, tentu akan terjadi perubahan yaitu gambar menyesuaikan dengan lebar layar HP. Cara membuat gambar postingan blog menjadi responsive ini bisa diterapkan pada semua jenis template. Kemudian jangan lupa untuk melakukan optimasi seo onpage pada gambar di postingan tersebut.

Mudah bukan?

Nah itu sedikit trik membuat gambar responsive pada postingan blog. Selamat mencoba