Cara Membuat Gambar Responsive di Blog

10/05/2014
Cara Membuat Gambar Responsive di Blog


Cara Membuat Gambar Responsive di Blog - Masalah yang sering terjadi ketika Anda mencoba untuk mengirim gambar dengan lebar lebih besar dari ukuran konten postingan blog atau gambar akan terlihat tidak responsive ketika mengubah ukuran browser Anda.



Pada demo di atas, gambar yang ada di dalam keluar melewati batas lebar konten karena lebar gambar lebih besar dari lebar konten.

Dengan itu disini saya akan memberikan sedikit tips tentang cara mengatasi gambar yang tidak responsive tersebut dengan memberikan kode CSS untuk gambarnya. (Trik ini sepenuhnya dapat diterapkan pada semua template blog).


Silahkan buka blog Anda > Template > Edit HTML > Salin dan pastekan CSS di bawah ini sebelum ]]></b:skin> atau </style>

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

Kemudian simpan perubahan dan lihat hasilnya.


Semoga bermanfaat.


Source : http://arlinadesign.blogspot.com/2014/10/cara-membuat-gambar-responsive-di-blog.html

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

24 comments

dengan trik ini, ran nya bsa nambah ga mba ?

Balas

keduax habis qurban gan :p

Balas

template dari mbak arlina udah ada ininya nih, tadinya gambar g teratur, sekarang jadi responsive, nice :-bd

Balas

untung blogku udah ada dari templatenya.. :)

Balas

ran itu apa ya mas? kl yg dimaksud loading page, ga ngaruh ko.. soalnya kode cssnya cm sedikit

Balas

iya mas, kebetulan semua template yg dibagikan disini sdh terdapat kode diatas :)

Balas

Share Template yg dipake dong mba :D

Balas

mungkin nanti kl sdh bosan

Balas

wah ini yang sya cari-cari, kbtulan lgi mikir untk mmbuat template default blogger jadi responsive dan seo

Balas

mksd nyh rank nyh mba, apakah berpengaruh.

Balas

iya mas, template default perlu banyak pembenahan terutama pd css dan responsivenya

Balas

trik ini hanya akan membuat gambar pd postingan menjadi responsive dan bisa jadi itu akan meningkatkan nilai rank walau sedikit jika pengunjung betah dengan tampilan blog yg rapi

Balas

Okeh ditunggu mba :D Udah ga sabar...

Balas

wahh.. makasih mbak.. jadi lebih responsive dah blog saya.. ;)

Balas

Kok saya gak work ya? :(

Balas

coba dicek kembali, mungkin nama CSS untuk post di template berbeda dari yang biasa. bisa jadi post-body img atau hanya img

Balas

kak saya pingin sekali punya template responsive buat blog Mp3 yang mirip2 stafaband kira2 klo order template kak arlin menerima tdak ya?? n kira2 brapa hrganya.

Balas

kak, kok cara diatas gagal ya?? boleh tolong di cek kak soalnya sudah saya otak atik cari kesana kemari g berhasil juga,bingung jdinya.. template saya hiburanquw blogspot com

Balas

terimakasih mas bermanfaat sekali saya sudah gunakan work 100%...

senangnya silaturahmi ke sini.

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.