Header Ads

Cara Membuat Gambar Banner Menjadi Responsive di Blog

Membuat Image Banner Responsive dalam situs web Anda - Tutorial ini memandu sobat untuk menciptakan sebuah gambar pilihan Anda menjadi responsive HTML5 di blog anda. Dengan menggunakan perintah CSS sederhana kita melakukannya ini semua. Sobat tidak perlu dengan penggunaan JavaScript maupun plugin jQuery jadi sobat hanya memerlukan sedikit pengkodean CSS sehingga gambar menjadi responsif.

Artikel ini hanya sekedar panduan dasar saja yaitu bagaimana gambar bisa menjadi responsive pada blog. Untuk sobat yang blognya sudah menggunakan template responsive sobat tidak perlu melakukan apa-apa cukup upload gambar lalu publish, gambar pun langsung responsive menyesuaian dari perangkat mana blog anda di buka.


Membuat gambar/ bannner menjadi responsive ?
Kali ini saya akan menerapkan CSS3 murni untuk membuat gambar menjadi responsif. Penggunaan gambar dengan gaya dan ukuran global pun tetap gambar tersebut menjadi fit dalam layar dan menempati ruang yang tersedia. Dengan demikian, gambar akan cukup terbaca di perangkat kecil.

Gambar-gambar akan responsif pada semua resolusi layar seperti :
  • Layar ponsel yang lebih kecil
  • 320x480 - iPhone [Potret orientasi]
  • 360x640 - Salah satu ponsel pintar
  • 780X1024 - tablet yang lebih besar atau Desktop 17'
  • desktop yang lebih besar

Selanjutnya klik icon perangkat di sudut kanan atas untuk melihat perubahan akan responsive gambar.


Lalu Bagaimana membuat gambar/ bannner menjadi responsive?

Baiklah kita mulai!

Pengkodean yang paling utama yaitu penggunaan img. Taruh code CSS dibawah ini tepat dibawah kode <head> pada file HTML blog anda.

<style type="text/css">
img {
    width: 100%;
    height: auto;
}
</style>

Keterangan :
  • Kenapa img ? Karena img adalah pemanggilan untuk semua gambar dalam berkas/file HTML yang ditulis dalam tanda kurung.
  • Penggunaan lebar saya menggunakan width: 100%; dan tingginya auto. Untuk kebutuhan tertentu kita bisa merubah lebar gambar mungkin sekitar 50% atau lebih kecil sesuai dengan resolusi layar.

Berikutnya tulis kode berikut setelah tag <body> di file HTML.

<img alt="Make Image responsive" height="90" src="images/728_90_panduan_blog.png" width="728" />

Sampai disini sebenarnya bila dilihat hasilnya sudah responsive. Namun ada kekurangannya, yaitu gambar ukuran seberapapun akan menyesuaikan lebar dari laya perangkat. Dalam artian bila gambar yang digunakan dengan ukuran lebarnya 728px dan dibuka dengan perangkat desktop maka gambar akan besar seukuran desktop sehingga gambar akan pecah.

Untuk itu kita sedikit melakukan modifikasi pengkodean CSS yang nanti ukuran gambar yang tampil diperangkat sesuai dengan perintah pengkodean CSS.

Untuk melakukannya dengan menambahkan kode CSS ini :
.demo_1 { width: 300px; height: auto; } 
@media(min-width: 500px) { .demo_1 { width: 468px; height: auto; } } 
@media(min-width: 767px) { .demo_1 { width: 600px; height: auto; } } 
@media(min-width: 1023px) { .demo_1 { width: 728px; height: auto; } } 

Maka penggunaan agar gambar lebih responsive menggunakan kode <div> seperti dibawah ini :
<div class="demo_1">
<img alt="Make Image responsive" height="90" src="images/728_90_panduan_blog.png" width="728" />
</div>

Terima kasih telah bersedia membaca artikel ini, setiap saran atau pertanyaan silahkan posting di bagian komentar di bawah.


No comments

Powered by Blogger.