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.
Niagahoster
VPS 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
VPS 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