Membuat Image Logo Valid HTML5 - Pada 2 artikel sebelumnya saya membahas hal yang berkaitan dengan Validasi HTML5, ternyata terus berkelanjutan dengan munculnya pertanyaan sahabat. Karena kemungkinan diperlukan oleh yang lain, maka jawabannya saya alihkan pada postingan ini. Pertanyaan ini datang dari sobat Abdul Ajiz Ridwanz yang mempertanyakan bagaimana membuat header gambar valid HTML5.HTML5

Yang dimaksudkan header gambar di sini bukan secara keseluruhan atau background image, melainkan logo pada header. Biasanya, penggunaan header image ini akan menyumbangkan 2 error pada validasi HTML. Hal ini dikarenakan adanya width dan height yang terpisah. Seperti kita ketahui, seharusnya tinggi dan lebar gambar harus ada pada CSS terpisah atau menggunakan inline CSS seperti style='width:212px;height:55px'.

Peringatan error pada Validator W3C kurang lebih seperti ini :

HTML5

Untuk mengatasi header image yang tidak valid HTML, silahkan cari kode ini

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

Untuk mempermudah gunakan Ctrl+F dan cari potongan kode seperti img expr:alt='data:title'. Kemudian hapus kode expr:height='data:height' dan expr:width='data:width' sepeti yang saya tandai pada kode di atas.

Setelah disave, coba test lagi menggunakan HTML5 validator.

132 komentar

nggakkkkkkkkkkkkkkkkkkkkd lagi deh

Balas

cepet amat ya mas lucky hehehe

Balas

beda sepersekian detik... kayak balap motor aja :D

Balas

bang sy ada masalah saat cek validasi html5.. yg error pada tanda > di <div class='post-title entry-title' itemprop='name'> ... solusi nya tau ngga?

Balas

superman kali ini telat :D

Balas

AKu juga lagi cari yg kaya gini :v

Balas
Komentar ini telah dihapus oleh pengarang.

kang kalo template yg zikazev simple gray bisa kan headernya pake logo , saya kemarin" nyoba tapi logonya malah jadi background title nya..

kalo pake cara yg ini bisa?
#maaf masih pemula :D

Balas

haha iya pake GP jad cepet kang :D

Balas

sebetulnya bukan pada tanda >, tapi pada penempatan Microdatanya.

Balas

wah yg ini ya kang.. uda lama saya buat valid.. oh ya kang,, mau nmbah ni msh berkaitan sama headernya nih.. bagian yg ini: <div id='header-inner'> nmpaknya jga msti di hapus kang berseta penutupnya, soalnya beberapa blog sprti saya bermasalah pada kode itu :)

Balas

Saya nggak pakek gambar log nya nih hehe
waduh beda 1 detik tuh :D

Balas

Pada layout (tata letak) ketika upload gambar pilih 'Selain judul dan keterangan'

Balas

hihihi mungkin dijalan lagi macet :D

Balas

udah saya coba, sebenernya ga dihapus juga ga apa2 sih.. intinya width dan height na yang harus dihapus

Balas

owh gitu ya,, mungkin cuman blog saya kali yg bermasalah kwkwk

Balas

oh.. ini ilalangnya kang, pantes gak ketemu dimana letak errornya :)

Balas

Cobian heula ah kang, kabeneran make logo yeuh :D

Balas

Sekarang baru dibuat tutorialnya :D
Dulu Kang Ismat pernah kasih solusi yang sama pada kolom komentar, dengan pertanyaan yang sama.

Balas

Siip kang hatur nuhun , saya salah pilih option malah di balik judul dan keterangan :D

Balas

wah hebat masih inget.. saya udah lupa :)
antisipasi pertanyaan berulang, mending posting aja deh :)

Balas

Hehe, iya Kang dulu pada hompage sudah hampir valid HTML5, tinggal headernya.

Balas

Oh ternyata tadi salah nulis nama. Peace :D

Balas

ijin mendalami materi ini kang ;) newbie akut ku gak sembuh sembuh :(

Balas

sebelumnya saya belum memakai logo img untuk header, tapi kedua kode itu sudah ada di template.. apa tdk apa2 kl dihapus? ada jg yg bilang ( lupa gak tau kt siapa :D ) kl otak-atik header itu fatal buat blog, karna header itu fungsinya sebagai identitas sebuah blog.... apakah betul? gimana nih menurut mastah KI :)

Balas

Izin nyimak dulu sapa tau paham.... :p

Balas

sempurna banget templatenya kang .. :3 . pengen.

Balas

ngikut minyak juga hehehehe... eh salah nyimak

Balas

Alhamdulillah blog saya udah valid HTML5 untuk homepage dan beberapa halaman postingnya... :D

Balas

Di blog saya sudah valid kang, tapi di chekme dot com masih terdeteksi missing titles pada logonya. Padahal di blog kalo di sorot cursors muncul title tang nya. kira kira kenapa ya Kang ?

Balas

kang, daripada pake expr: mending pake width='300' height='300' (contoh),toh kan juga sama validnya :)
cuma kasih kemudahan aja kang :D

Balas

kang maaf OOT , saya mau tanaya kenapa ya kang tiap di search di google artikel saya yang muncul selalu alamat g+ saya buakan alamat blog saya ??

Balas

Kang kalau buat template saya yang memakai
Dynamic heading bisa di guankan juga script diatas

Balas

masih pake tulisan biasa belum ada logonya :D

Balas

wkwkkw.... terus belajar and belajar jeng.. pasti sembuh :D

Balas

dihapus atau tidak, tidak masalah.. karena menggunakan tg kondisional yang akan terbaca saat mempunyai image sebagai logo. untuk masalah penghapusan, kita harus tau dulu mana yang boleh dihapus, mana yang tidak... kalau asal hapus ya itu yang bahaya :)

Balas

sayangnya belom dibagi2in xixixii

Balas

https://lh4.googleusercontent.com/-Pn52VUSA4FA/UrFB62BD77I/AAAAAAAAArY/e6xZRnp3Xy8/h120/sffsd.png

mas, bisa menyelesaiin masalah di atas gk?? menu dropdown nya kok begitu??

Balas

yang mana kang? yang gupitan? saya liat udah 100% ko

Balas

justru kode itu yang membuat error, kalau dirubah gitu ya sama aja dong :)
coba dibaca lagi artikelnya baik2 :)

Balas

mungkin belum ter-crawl secara sempurna oleh robot google..

Balas

Iya kang udah 100% tp masih ada 7 missing title :)

Balas

bisa kang... ini kan untuk logo image aja

Balas

[img]http://3.bp.blogspot.com/-O3lzn8SS_-o/UrFGYYCSGCI/AAAAAAAAC9w/u0M3BSIGvRU/s1600/Capture.JPG[/img]

Balas

begitu gimana? jadi dibawah gitu ya? coba tambahkan kode nav li ul {z-index:9999}

Balas

bukan logo aja kang, itu gambar di postingan juga... kalau untuk logo tambahkan title pada kode di atas :

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block' title='Gupitan'/>

untuk postingan harus ditambah di JSnya kang

Balas

Muhun kang postingan nu di homepage wungkul nu masih error, tos di utak atik tp masih can kapendak.
Dicobian hla Kang!

Balas

sipp, sudah berhasil kang, makasih tips nya

Balas

header nu saya malah disumputken kang .. maksad'na mah sementaun hehe sebelum dapet yg cucok

Balas

InsyaAllah :) semakin kesininya semakin paham, Aamiin

Balas

mangtap kang (y) ijin praktek ya kang ,
salam kenal kang :D

Balas

bikin logonya dulu mas baru nyoba

Balas

Selamat malam mas :) Menyimak dulu mas hehe

Balas

wah boleh dicoba ni kang sangat bermanfaat

Balas

Waah nuhun pisan kang.. emang kang Ismet Top marktop lah..... :D
Nuhun pisan kang sakali deui :D ...

Balas

Kadieu hela kang ah sebelum ngantor hehe ... ngopi ngopi !!

Balas

siap lah.... aya goreng peuyeum yeuh

Balas

Kan saya meu tanya, bagaimana cara memberi foto secara otomatis pada post yang tidak ada gambarnya.

Balas

Maksudnya Auto Readmore dengan thumbnail ya mas ?

Balas

bukan mas, tapi tampilan pada halaman awalnya

Balas

kerenn pengen coba juga tapi males utak-atik template lagi gak semangat ..

Balas

membantu kang,sukses dah buat akang yang satu ini (y)

Balas

keren kang,, saya sedikit paham dengan tutor diatas soalnya sudah pernah mencoba hehehe

Balas

Panay teh ieu blog akang nu anyar
http://droidpluss.blogspot.com/ ... !!

Balas

Sudah sukses mas setelah saya terapkan :)
nitip jejak : http://game-begog.blogspot.com

Saya sudah 2 jam di blog kangismet nih sampai keringetan

Balas

ehm pake racikan khusus agar terbaca headernya, okedeh saya gak ragu lg kl gt...
tinggal bikin logonya yg pas, siipp... makasih KI, keep posting :)

Balas

hehehe.. bener itu namanya auto readmore

Balas

kang ada referensi PHP ga... hyong gntos ie teh..

Balas

teu aya kang.. abdi song ngacak... bade migrasi ka WP kang?

Balas

maksud saya width='300' tanpa ada px dibelakangnya (contoh: biasanya header image memiliki attribut seperti ini : style='display:block' width='300px;', saya ubah jadi begini style='display:block' width='300'
bukannya dengan begitu juga bisa valid ya kang? tanpa menambahkan expr:width='data-width'?

Balas

Wah makasih mas tutor blogging ini... bisa tak cobain dulu

Balas

wah bermanfaat banget nih...... makasih kang infonya
visit back >>> http://indraahmadrobani.blogspot.com/

Balas

akhirnya dishare cuma sama akang, thanks kang

kunjungan baliknya saya tunggu

Balas

maaf kang oot nih, saya coba pasang slide dari sini http://www.dte.web.id/2012/02/slideshow-otomatis-blogger-dengan_27.html . Nah cara membuat slide nya cuma tampil di homepage gimana ya?

Balas

gimana cara akang menuju ke TKP windi? dia tidak berbagi apa2 lho kang di halaman google :(

Balas

gunakan tag konditional

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Kode HTML disini.....
</b:if>

Balas

nah justru saya juga bingung mau kemana :D

Balas

wah, bisa di coba nih... :D
thnks infonya kang :D

Balas

ah saya buru-buru cek dulu kang, mungkin juga pada error....makasih kang

Balas

Maaf, saya masih bingung soal tag kondisional kang.

Balas

Kang, maaf sebelumnya komentar yang saya berikan sedikit OOT
Saya mau nanya kenapa ya breadcrumbs blog saya kok error dengan muncul pesan seperti ini TEMPLATE ERROR: Invalud data reference post.labels: No dictionary named:'post' in: ['blog','skin'.'view']
Trimakasih sebelumnya

Balas

Blog berjalan innocenceberbagi[.]blogspot[.]com

Balas

mas sorry out of topic, bagaimana membuat tag pre pada komentar ikut berwarna ? seperti syntaxhighlighter. trims.

Balas

kang, kenapa setiap saya berkomentar di blog ini selalu hilang?, apa saya salah?, apa saya diblokir?, kalo iya apa alasanya kang?

Balas

takdir berkata lain mungkin :p

Balas

kapan update nih om bombay??? so long to wait :D

Balas

ulangi langi, biasanya ada kode yang kehapus

Balas

ah ngga ko... buktinya ini keliatan komennya.. saya cek di folder spam juga ga ada ko.. jadi kemana ya?

Balas

tambahkan kode pada manipulasi komentar

$('i[rel="pre"]').replaceWith(function() {
return $('<pre><code>' + $(this).html() + '</code></pre>');
});

Balas

http://www.om-ivan.com/2013/12/paket-javascript-fitur-manipulasi.html?showComment=1388103205256#c6862101089800997944 tetap tidak berpengaruh apa apa ._.

Balas

baru berhasil saat kode
// Menyisipkan tag `<pre>`
$('i[rel="pre"]', this).replaceWith(function() {
return $('<pre></pre>').append($(this).contents());
});


diganti dengan

$('i[rel="pre"]').replaceWith(function() {
return $('<pre><code>' + $(this).html() + '</code></pre>');
});


ada efek samping dari penggantian tersebut ?

Balas

ga ada.. maksud saya gitu, di ganti bukan ditambah :D

Balas

kang saya mau nanya nih:
1. Cara membuat navtab seperti http://goo.gl/VYzfzN
2. Cara membuat lightbox pada gambar postingan, dan halaman web, buka ini kang http://goo.gl/3aXhN1 (coba jelaskan cara pemasangannya dan coba cari kata "FLASH / SWF" dalam web tersebut, lalu klik gambarnya (saya ingin membuat halaman konversi kode dengan lightbox), maaf kang merepotkan saya sudah cari kesana-kesini tapi hasilnya kosong, dan tidak mengerti dari penjelasan blog lain, dan saya pusing mau nanya ke siapa lagi kang, jadi saya mohon sekali untuk pertanyaan saya yang satu ini, trimakasih

Balas

Untuk no 1.. coba download aja template sevida dan bongkar kodenya, soalnya panjang kl diposting disini.

Untuk No 2.. kebetulan saya mau posting lightbox evolution, ditunggu aja sob

Balas

ooh gitu ya? wkwkwk sori kalo gitu, nggak tau tuh kang, meureun nggak ke submit ._., mungkin saya terlalu cepet ngeclose setelah submit koment, hapuntennya kang

Balas

Wah mantep dah kang, thx buat tutornya

Balas

kalo template sevidanya sih sudah ada ditangan, namun bukan main ribetnya kang, hehe

Balas

bongkar2 sekalian pembelajaran :)

Balas

anjir gak nyangka, bisa gitu ya kang, itu kode javascript yang saya mimpikan kang, hehe akhirnya bisa terkabulkan, hatur thank you kang, mau nanya kang kok googlecode.com masih bisa digunakan?

Balas

Thumbnail posting nya keren kang :D icon kardus HTML5 .. wakakakk :D

Balas
Komentar ini telah dihapus oleh pengarang.

kebanykan susah ya valid CSS maupun HTML5.

Balas

kang bgaimana kalo error < /dl > ini saya masih bingung padahal kurang 1 lg nih ada error pada < /dl > saya masih blm mengerti fungsi "< /dl >" trus bagaimana cara menggantinya agar jadi valid html5??

Balas

Alahdulilah, ngges valid kuari kang :D

Balas

keren gan,,,,
visit n follow my blogg predatorilm.blogspot.com

Balas

Hanya bisa dipakai di website atau di blog?

Balas

Agar widget adsense valid html gimana ya kang....

Balas

newbi kang ,,thanks mau sharing,, mau praktekin dlu

Balas

terima kasih kang, akhirnya masalah saya selesai juga berkat artikel akang :-bd

Balas

|o| makasih dan berhasillllll

Balas

Poskan Komentar


×
Chat