Cara Membuat Gambar Responsive di Blog - Arlina Design
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

Cara Membuat Gambar Responsive di Blog

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

Portal Bola Online

Related Post

Portal Bola Online
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter

Notifications

Disqus Logo