Cara Membuat Gambar Responsive pada Blog - Fezarzone

Seperti janji saya sebelumnya di postingan Halaman Blog Ini Tambah Lebar pada kesempatan kali ini saya ingin membuat tutorial cara membuat gambar responsive pada blog.

Sobat blogger, biasanya pada sebuah template blogger yang tidak responsive ketika kita menyematkan sebuah gambar yang ukuran lebarnya lebih besar dari area post maka gambar tersebut akan melewati batas garis postingan karena gambar lebih besar dari kolom posting, dan tentu saja itu tidak sedap di pandang para pembaca karena terkesan tidak rapi dan tampilan yang lainnya dari blog ini seperti sidebar amburadul, pada kesempatan kali ini saya ingin membuat tutorial cara membuat gambar tersebut menjadi responsive pada blog, anda bisa lihat gambar di bawah sebuah gambar yang sebelumnya tidak responsive menjadi responsive :

Baca Juga : Cara Membuat Template Blogger sendiri secara Online

Cara Mengatur Ukuran Gambar Agar Pas Pada Posting Blog

Sebelum perubahan

Setelah perubahan

Gambar diatas adalah sebelum dan sesudah gambar di ubah menjadi responsive, nah untuk tutorialnya silahkan ikuti saja langkah mudah cara membuat gambar menjadi responsive ini.

Cara Membuat Gambar Responsive Pada Blog

#1 Upload Gambar
1. Login ke akun blogger sobat.
2. Upload sebuah gambar di postingan blog (bisa dicoba dengan gambar yang lebih lebar)
3. Ubah ukuran gambar menjadi original site


#2 Modifikasi kode CCS
1.Pilih menu template > Klik edit HTML
2. Carilah kode ]]></b:skin>
3. Lalu letakan kode dibawah ini tepat di atas kode ]]></b:skin> atau </style>

.post-body img {
  max-width:100%;
  height:auto; box-shadow: none; border: none; padding: 0px; }
}

4. Klik save template.

#3 Buat Posting
Silakan posting gambar yang di upload pada langkah pertama, dan hasinya gambar akan menjadi fit pada area posting blog.

Lihat juga : 45 Template Blog Keren Terbaik dan Terbaru