Begini Caranya Membuat Gambar Jadi Full Responsive Agar Sesuai di Layar Pengguna

SPOTROID - Image Full Responsive. Sudah pasti pengguna baru (newbi) akan bertanya-tanya 'bagaimana sih agar gambar cocok dengan ukuran layar apa saja?' Pertanyaan yang sama pernah spot alami dulu ketika baru mengenal yang namanya dunia Blogger.

Sebenarnya cara ini mudah saja kita lakukan namun belum tentu mudah bagi sebagian pemula yang baru mengenal blog. Mereka sendiri masih awam dan belum mengenal kode-kode dasar dalam desain web seperti kode dasar HTML dan CSS.

Bagi setiap pengguna Blogger, dua kode tersebut diwajibkan untuk mereka kuasai. Ya biarpun wajib tidak diharuskan bisa 100% sih. Mengerti dasar-dasarnya saja sudah lebih dari cukup kok.

Kenapa spot katakan begitu... karena sebagian pengguna baru, pada waktu mereka mengelola blognya itu untuk merubah suatu ukuran, warna, dan posisi, maka mereka akan kesulitan kalau sama sekali tidak mengerti sedikit pun akan kode dasar tersebut.

Misalkan saja pada kasus menulis artikel postingan. Contohnya sobat, dalam hal membuat sebuah artikel dan sobat memasukkan gambar diantara postingan sobat.

Kemudian setiap gambar yang sobat upload hanya terdapat beberapa ukuran yang ada, seperti small, medium, large, xlarge dan original. Kemudian posisi gambar none, left, right dan center.

Jika berpatokan dengan ukuran yang ada bukannya tidak boleh. Akan tetapi ukuran yang spot sebutkan di atas adalah ukuran defaul dari Blogger, ukuran defaul itu adalah ukuran yang telah ditetapkan Blogger.

Yang dimaksud dengan ukuran tetap adalah ukuran yang tidak fleksibel atau bukan ukuran (bunglon) yang dapat menyesuaikan dirinya. Misalkan saat upload gambar sobat pilih ukuran medium (sedang) maka nanti ukuran gambar tersebut hanya cocok pada layar tertentu saja.

Jika sobat memilih ukuran gambar defaul dengan menetapkan ukuran large atau xlarge maka sebagian dari pengguna yang menggunakan ponsel akan melihat hanya sebagian dari dari keseluruhan gambar (full view), karena yang sebagiannya terpotong oleh screen (layar).

Baik sobat sebagai pemilik blog maupun pengunjung akan merasa tidak nyaman dengan tampilan gambar seperti itu. Sangat-sangat tidak menyenangkan bukan???

Jadi untuk mengatasi masalah gambar agar fleksibel atau yang lebih dikenal dengan sebutan responsive , yang perlu sobat lakukan disini hanya mengatur CSS untuk gambar agar sesuai pada setiap resolusi layar pengguna.

Spot rasa sobat sudah paham dong dengan penjelasan di atas, ya paling tidak sedikitnya saja. Berikutnya kita langsung saja menuju denah untuk tata cara membuat atau mengatur ukuran gambar resposive dengan CSS.

Cara Membuat Gambar full Responsive dengan CSS by Spotroid


Ini hanya contohnya saja ya, yang nanti juga dapat sobat terapkan pada blog yang sobat kelola, ingat pastikan yang sobat kelola jangan milik tetangga sebelah ntar sobat dimarahin loh hehehe.

1. Gambar responsive langsung pada edit postinga

Yang pertama sobat bisa edit postingan yang ada atau buat yang baru. Upload salah satu gambar kemudian langsung klik 'add selected' dan langsung klik 'OK'.

Kemudian akan terlihat kode dan url gambar seperti pada contoh berikut.

<a href="https://1.bp.blogspot.com/-EvkUV8Rv22o/WhcMgLewkXI/AAAAAAAAAd4/WxIHY_WEH2wEYloOkWifZhIoXH9pzOlNwCPcBGAYYCw/s1600/cara-pasang-iklan-google-adsense.png" imageanchor="1" ><img border="0" src="https://1.bp.blogspot.com/-EvkUV8Rv22o/WhcMgLewkXI/AAAAAAAAAd4/WxIHY_WEH2wEYloOkWifZhIoXH9pzOlNwCPcBGAYYCw/s320/cara-pasang-iklan-google-adsense.png" width="320" height="183" data-original-width="1261" data-original-height="720" /></a>

Kemudian sobat hapus seluruh kode dan url yang spot tandai dengan warna merah, lalu tambahkan kode Style CSS berikut sebelum src atau sebelum /> terserah sobat, dan berikut kodenya.

style="height:auto;width:100%;margin:10px 0px;padding:0px;"

Sehingga hasilnya seperti berikut ini:

<img src="https://1.bp.blogspot.com/-EvkUV8Rv22o/WhcMgLewkXI/AAAAAAAAAd4/WxIHY_WEH2wEYloOkWifZhIoXH9pzOlNwCPcBGAYYCw/s320/cara-pasang-iklan-google-adsense.png" style="height:auto;width:100%;margin:10px 0px;padding:0px;" />

2. Gambar responsive melalui tema / 'Edit HTML' template

Kalau yang pertama tadi adalah cara manual membuat gambar responsive pada gambar yang ditentukan saja, sedangkan pada langkah kedua ini adalah cara otomatis gambar responsive yang akan berlaku pada setiap gambar postingan yang ada sebelumnya dan yang akan datang.

Caranya: pada dasbor Blogger klik Tema > klik Edit HTML > kemudian cari kode </style> atau kode ini ]]></b:skin> gunakan tombol Ctrl + F secara bersamaan, dikotak search ketik salah satu kode tersebut dan Enter > setelah salah satu kode tersebut sobat dapatkan kemudian letakkan kode berikut tepat di atasnya.

.post-body img{height:auto;width:100%;margin:10px 0px;padding:0px;}

Setelah itu klik Simpan tema agar kode yang sobat masukkan tersebut tersimpan.

Dari tutorial di atas maka gambar sebelum dan setelah dibuat jadi responsive akan seperti berikut ini.

A. Gambar ukuran defaul Blogger dengan ketentuan posisi tengah, ukuran medium 320 px × 183 px.

Kode:
<center><img border="0" src="url gambar disini" style="height:183px;width:320px;" /></center>

B. Gambar responsive dengan ukuran kostum lebar maksimal 100% dan tinggi otomatis sesuai tinggi ukuran asli dari gambar.

Kode:
<img src="url gambar disini" style="width:100%;" />

Jika sobat mengunakan Smartphone dengan layar 5 inci maka sobat akan melihat kedua gambar di atas memiliki ukuran yang tidak sama, walaupun gambar yang digunakan adalah gambar yang sama. Namun, sobat akan melihat hal berbeda apabila sobat melihatnya pada layar mode landscape, kedua gambar tersebut akan terlihat beda ukurannya.

Untuk gambar A akan terlihat dengan ukuran tetap yaitu 320 px (lebar) dan 183 px (tinggi). Sedangkan gambar B akan terlihat penuh dengan lebar 100% mengikuti ukuran layar.

Penutup: sengkiranya artikel-artikel yang ada di blog Spotroid bermanfaat bagikan kepada teman-teman yang lain.

Salam sukses...
BLOG: Awak Blang Awe

YUK IKUTAN BERPARTISIPASI
Anda suka dengan artikel di atas? Bagikan!
Dengan 1x Anda membagikan artikel blog ini, artinya Anda telah ikut serta dalam menunjang berkembangnya blog "Spot Teknologi Android". Sekecil apapun usaha partisipasi Anda sangat berarti bagi blog ini, terimakasih.