Cara Menghilangkan Missing Dimension Pada Header Image Logo Valid HTML5

Cara Menghilangkan Missing Dimension Pada Header Image Logo Valid HTML5 – beberapa waktu lalu saya sempat blogwalking ke blog Kang Ismet, dan saat itu saya membaca artikel terbarunya dengan judul Membuat Header Image Logo Valid HTML5. Inti dari artikel tersebut adalah menghapus bagian width dan height otomatis pada header sehingga bagian logo header bergambar menjadi valid HTML5.

Anda bisa kunjungi artikelnya disini.

Hal pertama yang dilakukan adalan cek dimension gambar anda di gtmetrix.com, masukkan url blog anda, lalu klik GO!. Tunggu beberapa saat, setelah grade blog ditampilkan, cari dan klik Specify image dimensions.


Pada kesempatan kali ini saya hanya sedikit merombak logo header bergambar agar tidak terjadi missing dimension dan tetap valid HTML5. Caranya, terlebih dahulu hapus expr:height='data:height'  dan expr:width='data:width', sebagai gantinya masukkan kembali width dan height manual seperti di bawah ini:
Width=’238’ (lebar logo gambar header)
Height=’36’ (tinggi logo gambar header)

Yang tadinya seperti ini:
<img expr:alt='data:title' expr:height='data:height' expr:width='data:width' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' style='display: block;padding-left:0px;padding-top:0px;'/>
Menjadi seperti ini:
<img expr:alt='data:title' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:title='data:title' height='36' style='display: block;padding-left:0px;padding-top:0px;' width='238'/>
Perhatikan gambar di bawah ini:
Gambar 1: Sebelum dibuat dimensionnya

Gambar 2: Setelah dibuat dimensionnya


Dari kedua gambar di atas, anda dapat melihat perbedaanya. Gambar pertama menunjukkan missing dimension pada bagian header bergambar dengan adanya link gambar yang diberi garis bawah warna merah yang sudah dihilangkan expr:height='data:height' dan expr:width='data:width'. Pada gambar kedua, link gambar yang digaris bawah tadi sudah tidak Nampak alias menghilang. Artinya, header blog bergambar bebas dari missing dimension dan tetap valid HTML5.

Sampai disini tutorial tentang Cara Menghilangkan Missing Dimension pada Header Image Logo Valid HTML5. Terima kasih terlah berkunjung.

Advertisement