membuat gambar di blog menjadi responsive.

membuat gambar di blog menjadi responsive.

Assalamualaikum.
Gambar - Merupakan salah satu konten penting didalam sebuah blog,karena apa jadinya jika blog tanpa gambar? tentu akan terasa hambar bukan?
Bagi anda pengguna blogger.com yang sedang memodifikasi template blog menjadi responsive maka sebaiknya anda juga memerhatikan konten gambar yang anda miliki di blog.Gambar yang responsive juga menentukan bagus atau tidaknya tampilan blog di perangkat smartphone dan perangkat lainnya.
Gambar responsive yang saya naksud disini adalah konten gambar yang dapat beradaptasi sesuai dengan resolusi layar gadget yang anda atau orang lain gunakan saat mengunjungi blog anda.
Bagi anda yang sedang memodif template blog anda menjadi responsive,tentunya anda akan memerlukan tutorial seperti ini.

Berikut cara membuat gambar di blog menjadi responsive
1.Pertama-tama yang anda harus lakukan adalah masuk ke halaman dashboard blog anda di www.blogger.com dengan menggunakan akun blogger yang anda miliki.
2.Setelah masuk ke halaman dashboard,silahkan anda klik nama blog yang anda miliki (apabila anda memiliki blog lebih dari 1).Contoh seperti gambar dibawah ini.

membuat gambar di blog menjadi responsive.

3.Di halaman berikutnya silahkan anda klik template,seperti contoh gambar dibawah ini.
membuat gambar di blog menjadi responsive.

4.Selanjutnya anda klik edit HTML,seperti contoh gambar dibawah ini.
membuat gambar di blog menjadi responsive.

5.Nanti anda akan bertemu dengan struktur kode-kode yang membentuk template blog anda.Silahkan anda cari kode
]]></b:skin>
atau
</style>

Agar lebih mudah dalam pencarian kode anda bisa menggunakan CTRL+F (jika anda menggunakan komputer).
Lalu masukkan kode berikut ini tepat diatasnya.
.post-body img {
  max-width:100%;
  height:auto;
}

6.Lalu anda cari lagi kode seperti berikut ini.
<b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>

7.Silahkan anda hapus kode tersebut dan ganti dengan kode berikut ini.
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

8.Jika sudah,berikutnya silahkan anda klik save atau simpanuntuk menyimpan perubahan kode template.

Demikianlah cara membuat konten gambar di blog menjadi responsive,apabila masih ada kekurangan atau kode alternatif lainnya maka silahkan memberikan komentar,karena komentar anda akan menjadi sesuatu hal yang amat membantu bagi saya.
Terimaksih telah berkunjng dan semoga bermanfaat.
Assalamualaikum.

Berkomentarlah dengan kata-kata yang baik dan dilarang mencantumkan link berbau pornografi,iklan