[Gambar Responsif] Cara Membuat Gambar Responsif Untuk Blogger

Sulivan-Project | Ada banyak cara sebenarnya untuk membuat gambar yang Responsif.
Salah satunya adalah dengan bantuan CSS, dengan CSS kita akan mengatur ukuran gambar yang sesuai dengan ukuran layar.

Gambar Responsif juga berpengaruh besar pada kecepatan loading halaman, jadi agar halaman yang dimuat tidak terlalu memakan waktu lama.

Kalau begitu kita langsung saja ya pada tutorialnya, dan langkah-langkahnya dibawah ini:

CSS Gambar Responsif

<style>
.responsive {
width: 100%;
height: auto;
}
</style>

---

Menambahkan CSS sebenarnya ada 2 cara untuk platform blogger, dan berikut cara menambahkan CSS pada Template Blogger dan langsung pada postingan.

Menambahkan CSS pada Template HTML Blogger

Copy code CSS berikut:

.responsive {
    width: 100%;
    height: auto;
  }
  

Masuk ke Blogger kalian

Klik Tema/Theme

Edit HTML

Klik pada halaman Template dan tekan CTRL+F dan ketik </style

Dan Paste CSS tepat di atasnya

Menambahkan CSS langsung pada postingan

Copy code CSS berikut:

<style>
.responsive {
width: 100%;
height: auto;
}
</style>

Masuk ke Blogger kalian

Klik Postingan

Entry Baru

Klik HTML di pojok kiri atas

Paste Code CSS tepat dibawah postingan

Dan Sekarang Setting Gambar Responsif

Upload gambarmu terlebih dahulu

Pilih gambarmu di upload darimana, kalau upload dari komputer, langsung klik pilih file

Pilih gambar dan open

Klik Add Selected, kemudia silahkan pilih layout yang kamu inginkan

Setelah selesai, blok teks mulai dari width sampai sebelum /> persis seperti dibawah ini

Kemudian hapus dan ganti dengan class="responsive" seperti dibawah ini

Dan selesai

Sekarang gambar kamu sudah Responsif, yang akan mengikuti ukuran layar secara otomatis namun gambar tetap bagus, dan juga mempercepat loading halaman

Terima kasih dan Happy Blogging

---

Update

Anda hanya perlu mengganti "responsive" dengan "sp-mobile"

Tapi sebelum itu anda copy script ini dahulu

<link rel="stylesheet" type="text/css" href="https://cdn.statically.io/gh/FajarSulivan26/S-P/47a3f424/all.css"/>,

dan paste tepat dibawah code </script>

Selesai.

Share this post