Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.
Beranda
HTML5

Membuat Header Image / Logo Valid HTML5

Cara membuat header dengan gambar menjadi valid HTML5
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.
#HTML5

129 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Pertamax dulu kang :D
    1. nggakkkkkkkkkkkkkkkkkkkkd lagi deh
  2. Sip mas mantap
    1. superman kali ini telat :D
  3. 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?
    1. sebetulnya bukan pada tanda >, tapi pada penempatan Microdatanya.
  4. AKu juga lagi cari yg kaya gini :v
  5. 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 :)
    1. udah saya coba, sebenernya ga dihapus juga ga apa2 sih.. intinya width dan height na yang harus dihapus
  6. oh.. ini ilalangnya kang, pantes gak ketemu dimana letak errornya :)
    1. hehe.. ngumpet :D
  7. Cobian heula ah kang, kabeneran make logo yeuh :D
    1. sok cobian mangga...
    2. kerenn pengen coba juga tapi males utak-atik template lagi gak semangat ..
  8. Sekarang baru dibuat tutorialnya :D
    Dulu Kang Ismat pernah kasih solusi yang sama pada kolom komentar, dengan pertanyaan yang sama.
    1. wah hebat masih inget.. saya udah lupa :)
      antisipasi pertanyaan berulang, mending posting aja deh :)
  9. ijin mendalami materi ini kang ;) newbie akut ku gak sembuh sembuh :(
    1. wkwkkw.... terus belajar and belajar jeng.. pasti sembuh :D
  10. 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 :)
    1. 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 :)
  11. Izin nyimak dulu sapa tau paham.... :p

    1. ngikut minyak juga hehehehe... eh salah nyimak
  12. sempurna banget templatenya kang .. :3 . pengen.
    1. sayangnya belom dibagi2in xixixii
  13. Alhamdulillah blog saya udah valid HTML5 untuk homepage dan beberapa halaman postingnya... :D
    1. selamat deh sob :-bd
  14. 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 ?
    1. yang mana kang? yang gupitan? saya liat udah 100% ko
  15. kang, daripada pake expr: mending pake width='300' height='300' (contoh),toh kan juga sama validnya :)
    cuma kasih kemudahan aja kang :D
    1. justru kode itu yang membuat error, kalau dirubah gitu ya sama aja dong :)
      coba dibaca lagi artikelnya baik2 :)
  16. 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 ??
    1. mungkin belum ter-crawl secara sempurna oleh robot google..
  17. Kang kalau buat template saya yang memakai
    Dynamic heading bisa di guankan juga script diatas
    1. bisa kang... ini kan untuk logo image aja
  18. masih pake tulisan biasa belum ada logonya :D
    1. sama aja ko kang.. hehhe
  19. Mangtappppp :)
  20. https://lh4.googleusercontent.com/-Pn52VUSA4FA/UrFB62BD77I/AAAAAAAAArY/e6xZRnp3Xy8/h120/sffsd.png

    mas, bisa menyelesaiin masalah di atas gk?? menu dropdown nya kok begitu??
    1. begitu gimana? jadi dibawah gitu ya? coba tambahkan kode nav li ul {z-index:9999}
  21. mangtap kang (y) ijin praktek ya kang ,
    salam kenal kang :D
  22. bikin logonya dulu mas baru nyoba
  23. Selamat malam mas :) Menyimak dulu mas hehe
  24. wah boleh dicoba ni kang sangat bermanfaat
  25. pertamax kang
  26. Waah nuhun pisan kang.. emang kang Ismet Top marktop lah..... :D
    Nuhun pisan kang sakali deui :D ...
  27. Kadieu hela kang ah sebelum ngantor hehe ... ngopi ngopi !!
    1. siap lah.... aya goreng peuyeum yeuh
  28. Kan saya meu tanya, bagaimana cara memberi foto secara otomatis pada post yang tidak ada gambarnya.
    1. Maksudnya Auto Readmore dengan thumbnail ya mas ?
  29. Mantep Kang :D
  30. membantu kang,sukses dah buat akang yang satu ini (y)
  31. keren kang,, saya sedikit paham dengan tutor diatas soalnya sudah pernah mencoba hehehe
  32. Panay teh ieu blog akang nu anyar
    http://droidpluss.blogspot.com/ ... !!
    1. hehehe... iseng kang :D
  33. Sudah sukses mas setelah saya terapkan :)
    nitip jejak : http://game-begog.blogspot.com

    Saya sudah 2 jam di blog kangismet nih sampai keringetan
    1. wah... lama juga ya :D
  34. Wah makasih mas tutor blogging ini... bisa tak cobain dulu
  35. wah bermanfaat banget nih...... makasih kang infonya
    visit back >>> http://indraahmadrobani.blogspot.com/
    1. sama2 sob...
  36. akhirnya dishare cuma sama akang, thanks kang

    kunjungan baliknya saya tunggu
    1. menuju TKP :D
  37. 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?
    1. gunakan tag konditional

      <b:if cond='data:blog.url == data:blog.homepageUrl'>
      Kode HTML disini.....
      </b:if>
  38. wah, bisa di coba nih... :D
    thnks infonya kang :D
  39. ah saya buru-buru cek dulu kang, mungkin juga pada error....makasih kang
  40. 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
    1. ulangi langi, biasanya ada kode yang kehapus
  41. Blog berjalan innocenceberbagi[.]blogspot[.]com
  42. mas sorry out of topic, bagaimana membuat tag pre pada komentar ikut berwarna ? seperti syntaxhighlighter. trims.
    1. tambahkan kode pada manipulasi komentar

      $('i[rel="pre"]').replaceWith(function() {
      return $('<pre><code>' + $(this).html() + '</code></pre>');
      });
  43. kapan update nih om bombay??? so long to wait :D
    1. hehehe.. lagi sibuk
  44. 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
    1. 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
  45. Wah mantep dah kang, thx buat tutornya
  46. Thumbnail posting nya keren kang :D icon kardus HTML5 .. wakakakk :D
    1. hahaha mantap ya
  47. Unknown
    Komentar ini telah dihapus oleh pengarang.
  48. kebanykan susah ya valid CSS maupun HTML5.
  49. 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??
  50. Alahdulilah, ngges valid kuari kang :D
  51. tetap nggak bisa kang
  52. keren gan,,,,
    visit n follow my blogg predatorilm.blogspot.com
  53. Hanya bisa dipakai di website atau di blog?
  54. Agar widget adsense valid html gimana ya kang....
  55. newbi kang ,,thanks mau sharing,, mau praktekin dlu
  56. terima kasih kang, akhirnya masalah saya selesai juga berkat artikel akang :-bd
  57. |o| makasih dan berhasillllll
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.