Membuat Gambar Postingan Agar Responsive dan Valid HTML5

Menambahkan gambar pada sebuah postingan adalah salah satu cara untuk mempercantik postingan. Gambar ini berguna sebagai demo, memberi petunjuk terhadap sesuatu, mendukung atau memastikan postingan untuk menarik pengunjung agar membuat postingan tertentu ketika berada di halaman beranda, atau hal lain yang disesuaikan dengan kepentingan dan seleran si pemilik blog.

Namun, jika kita memuat gambar yang lebarnya lebih besar dari ukuran lebar halaman postingan maka terkadang gambar tersebut ikut terpotong. Selain itu, mengupload gambar ke postingan dan membiarkannya secara default lalu langsung mempubliskannya, maka jelas postingan tersebut tidak akan valid HTML5.

Membuat Gambar Postingan Agar Responsive dan Valid HTML5

Nah, untuk itu postingan kali ini bertujuan untuk membuat bagaimana gambar di postingan ini menjadi responsive dan balid HTML5.

Membuat gambar dalam postingan agar responsive.

Kopi kode di bawah ini di atas kode </style> atau di atas kode </head>
/* Meresponsive Gampar Postingan */
.separator{background:#f5f5f5;border:1px solid #e5e5e5;float:none;max-width:100%; height: auto; width: auto; padding:20px 20px 12px;margin:20px auto 10px;text-align:center !important}
.separator img, .separator a img{max-width:100%; height: auto; width: auto;margin:0; padding:0;text-align:center !important;}

Cara di atas tidak berlaku untuk gambar yang menggunakan add caption

Membuat gambar postingan valid HTML5

Langkah 1: setelah gambar berhasil di upload, klik gambar tersebut lalu klik lagi “Original size”.
Langkah 2: masih di gambar yang tadi, klik “Properties” buatlah title text dan alt text pada gambar tersebut.
gambar postingan menjadi responsive
Gambar langkah 1 dan 2

gambar postingan menjadi responsive
Gambar langkah 2

Langkah 3: klik HTML (di sudut kiri atas postingan) hapus kode border=”0” dan kode yang diseleksi pada gambar di bawah ini.
membuat postingan valid html5
Gambar langkah 3

Jika postingan sudah rampung, maka publishkan.
Selamat mencoba.
Niagahoster
Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K
Free and premium blogger templates