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.

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 langkah 1 dan 2

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.

Gambar langkah 3

Jika postingan sudah rampung, maka publishkan.
Selamat mencoba.

Baca Juga: