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 Gambar2. Upload sebuah gambar di postingan blog (bisa dicoba dengan gambar yang lebih lebar)
3. Ubah ukuran gambar menjadi original site
#2 Modifikasi kode CCS
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.
0 komentar
Posting Komentar