Begini Caranya Membuat Gambar Jadi Full Responsive Agar Sesuai di Layar Pengguna
Desain Image 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 kamu, dalam hal membuat sebuah artikel dan kamu memasukkan gambar diantara postingan kamu.
Kemudian setiap gambar yang kamu 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 kamu pilih ukuran medium (sedang) maka nanti ukuran gambar tersebut hanya cocok pada layar tertentu saja.
Jika kamu 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 kamu 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 kamu lakukan disini hanya mengatur CSS untuk gambar agar sesuai pada setiap resolusi layar pengguna.
Spot rasa kamu 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 BimBel
Ini hanya contohnya saja ya, yang nanti juga dapat kamu terapkan pada blog yang kamu kelola, ingat pastikan yang kamu kelola jangan milik tetangga sebelah ntar kamu dimarahin loh hehehe.
1. Gambar responsive langsung pada edit postinga
Yang pertama kamu 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 kamu hapus seluruh kode dan url yang saya tandai dengan warna merah, lalu tambahkan kode Style CSS berikut sebelum src atau sebelum /> terserah kamu, 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 kamu 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 kamu 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.
B. Gambar responsive dengan ukuran kostum lebar maksimal 100% dan tinggi otomatis sesuai tinggi ukuran asli dari gambar.
Jika kamu mengunakan Smartphone dengan layar 5 inci maka kamu akan melihat kedua gambar di atas memiliki ukuran yang tidak sama, walaupun gambar yang digunakan adalah gambar yang sama. Namun, kamu akan melihat hal berbeda apabila kamu 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 Bimbel Blogger bermanfaat bagikan kepada teman-teman yang lain.
Sekian dan terimakasih.
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 kamu, dalam hal membuat sebuah artikel dan kamu memasukkan gambar diantara postingan kamu.
Kemudian setiap gambar yang kamu 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 kamu pilih ukuran medium (sedang) maka nanti ukuran gambar tersebut hanya cocok pada layar tertentu saja.
Jika kamu 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 kamu 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 kamu lakukan disini hanya mengatur CSS untuk gambar agar sesuai pada setiap resolusi layar pengguna.
Spot rasa kamu 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 BimBel
Ini hanya contohnya saja ya, yang nanti juga dapat kamu terapkan pada blog yang kamu kelola, ingat pastikan yang kamu kelola jangan milik tetangga sebelah ntar kamu dimarahin loh hehehe.
1. Gambar responsive langsung pada edit postinga
Yang pertama kamu 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 kamu hapus seluruh kode dan url yang saya tandai dengan warna merah, lalu tambahkan kode Style CSS berikut sebelum src atau sebelum /> terserah kamu, 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 kamu 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 kamu 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.
B. Gambar responsive dengan ukuran kostum lebar maksimal 100% dan tinggi otomatis sesuai tinggi ukuran asli dari gambar.
Jika kamu mengunakan Smartphone dengan layar 5 inci maka kamu akan melihat kedua gambar di atas memiliki ukuran yang tidak sama, walaupun gambar yang digunakan adalah gambar yang sama. Namun, kamu akan melihat hal berbeda apabila kamu 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 Bimbel Blogger bermanfaat bagikan kepada teman-teman yang lain.
Sekian dan terimakasih.
0 Response to "Begini Caranya Membuat Gambar Jadi Full Responsive Agar Sesuai di Layar Pengguna"
Posting Komentar