Cara Membuat Gambar Responsive pada Blog

Cara Membuat Gambar Responsive pada Blog

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


Mengatur lebar Template Blog



Setelah perubahan


Mengatur lebar Template Blog



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.


Terimakasih atas kunjungan sobat karena telah bersedia membaca artikel Cara Membuat Gambar Responsive pada Blog dengan url http://salamunpicassa.blogspot.com/2015/08/cara-membuat-gambar-responsive-pada-blog.html. Semoga artikel ini bermanfaat bagi sobat. Jika ada link yang rusak atau terkendala download file silakan lapor admin melalui komentar dibawah. Terima Kasih, :)


Silahkan berkomentar sesuai artikel diatas
Berkomentar dengan url ( mati / hidup ) tidak akan di publish

Post a Comment

Silahkan berkomentar sesuai artikel diatas
Berkomentar dengan url ( mati / hidup ) tidak akan di publish

Contact Us

Name

Email *

Message *

Back To Top