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:
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.
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 + "_headerimg"' 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 + "_headerimg"' 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.
7 komentar
https://www.blogger.com/profile/10118216234117579006https://www.blogger.com/profile/13162875744493565460Biasanya yang sering muncul paling atas di gtmetrix adalah dimension gambar, karena blog mungkin terpasang like box bergambar dan thumbnail di homepage. Selain itu, penggunaan javascript dan jQuery yang berlebihan, serta penggunaan widget yang berlebihan pula. Kalau kita mampu memperbaikinya, maka dengan begitu kita telah menghemat size template. Mungkin begitu intinya.
https://www.blogger.com/profile/11917658355012909986https://www.blogger.com/profile/13162875744493565460https://www.blogger.com/profile/18094136669316481526https://www.blogger.com/profile/13162875744493565460Bisa ditambahkan dengan css seperti ini:
a,a:link,a:visited{color:#222;text-decoration:none;}
https://www.blogger.com/profile/13162875744493565460/* Links */
a:link{color:#3B5998;text-decoration:none;}
a:hover{color:#FF463B;text-decoration:none;}
Tinggal ganti seperti ini:
/* Links */
a:link{color:#222;text-decoration:none;}
a:hover{color:#FF463B;text-decoration:none;}
Image.pre,code, atauquote.Salin Kode!lalu paste ke kolom komentar.image quote pre code