Gambar Postingan yang bisa menyesuaikan ukuran layar saat ini sudah menjadi bagian tak terpisahkan dari sebuah design template yang responsive. Gambar responsive sangat penting sekali mengingat ada banyak jenis smartphone yang beredar di pasaran. Jika sebuah gambar tidak responsive, maka yang terjadi adalah besarnya gambar tidak sesuai dengan layar suatu device (terlalu besar)
Untuk membuat picture dalam suatu artikel jadi responsive sangatlah mudah. Kita hanya perlu menambahkan sedikit kode css untuk mengatur picture tersebut. Sehingga tatkala perangkat lunak yang kita gunakan ukuran layarnya lebih kecil dari ukuran gambar aslinya, maka yang terjadi adalah gambar tersebut akan mengecil dengan sendirinya.
Berikut langkah yang tepat membuat gambar artikel responsive:
1. Visit www.bloger.com kemudian login menggunakan akun sobat
2. Klik template dilanjutkan edit html
3. Cari kode .separator dengan bantuan CTRL + F
4. Sisipkan kode max-width ke dalam css separator sehingga hasilnya akan menjadi seperti dibawah ini
5. Jika template sobat tidak memiliki kode separator, langsung cari kode ]]></b:skin> dengan bantuan CTRL + F.
6. Langsung saja salin kode css diatas tepat di atas kode ]]></b:skin>
7. Klik simpan dan lihatlah hasilnya
Demikianlah tutorial singkat dan mudah membuat gambar blogspot jadi responsive. Semoga artikel sederhana ini mampu membuat anda semakin cerdas dalam menyiasati perubahan struktur blogger yang sering berubah-ubah.
Untuk membuat picture dalam suatu artikel jadi responsive sangatlah mudah. Kita hanya perlu menambahkan sedikit kode css untuk mengatur picture tersebut. Sehingga tatkala perangkat lunak yang kita gunakan ukuran layarnya lebih kecil dari ukuran gambar aslinya, maka yang terjadi adalah gambar tersebut akan mengecil dengan sendirinya.
Berikut langkah yang tepat membuat gambar artikel responsive:
1. Visit www.bloger.com kemudian login menggunakan akun sobat
2. Klik template dilanjutkan edit html
3. Cari kode .separator dengan bantuan CTRL + F
4. Sisipkan kode max-width ke dalam css separator sehingga hasilnya akan menjadi seperti dibawah ini
.separator a{max-width:100%;height:auto;margin-left:0px !important;margin-right:0px !important;}
.post img{max-width:100%;height:auto;}
.post img{max-width:100%;height:auto;}
5. Jika template sobat tidak memiliki kode separator, langsung cari kode ]]></b:skin> dengan bantuan CTRL + F.
6. Langsung saja salin kode css diatas tepat di atas kode ]]></b:skin>
7. Klik simpan dan lihatlah hasilnya
Demikianlah tutorial singkat dan mudah membuat gambar blogspot jadi responsive. Semoga artikel sederhana ini mampu membuat anda semakin cerdas dalam menyiasati perubahan struktur blogger yang sering berubah-ubah.
2 Komentar untuk "Cara Membuat Gambar Postingan Jadi Responsive"
Untuk pengguna template Super Responsive yang free version, silahkan ikuti tutorial diatas agar gambar postingan jadi otomatis responsive.
Manteb. Kalau soal beginian saya cuma modal nyari tips & trik aja.
Please Share & Follow US ON Google+