Validasi HTML5 Google Custom Search Engine

Pada postingan sebelumnya saya sudah membahas cara membuat Google Search Engine di blog untuk memperbaharui postingan serupa yang membahas tentang menambahkan fungsi Google Search Engine pada search box di blog karena tampilan Google Custom Search sudah berubah sehingga sudah tidak sesuai dengan tutorialnya.

Namun pada kode Google Custom Search Engine tersebut ternyata menyumbangkan 1 buah error dan 1 buah warning pada validasi HTML5. Untuk itu kini saya akan membagikan cara validasi HTML5 untuk Google Custom Search Engine di blog.


Validasi HTML5 Google Custom Search Engine

Error dan warning dari kode Google CSE ini disebutkan sebagai kode yang tidak dapat direpresentasikan sebagai XML 1.0 dan tidak bisa dijadikan sebagai anakan dari elemen DIV seperti tampak pada gambar di bawah ini.

Error Validasi HTML5 Google Custom Search Engine

Kode yang error ini adalah kode <gcse:searchbox-only></gcse:searchbox-only>. Nah untuk memvalidkan kode ini, kita lakukan sedikit perubahan dengan menambahkan sedikit kode jquery.

Dari postingan sebelumnya, kita mendapatkan kode GCSE pada langkah ketujuh untuk disimpan di blog seperti berikut ini.


<script>
  (function() {
    var cx = '0061063966908494606:yeabjpcg';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

Perhatikan kode <gcse:searchresults-only></gcse:searchresults-only> ini, silahkan ganti kode tersebut dengan kode di bawah ini dan simpan di atasnya.


<div id="gcsengine"></div>
<script>
   var gcseDiv = document.getElementById('gcsengine');
   gcseDiv.innerHTML = '<gcse:searchresults-only></gcse:searchresults-only>'
</script>

Ini berlaku untuk semua layout, seperti <gcse:search>, <gcse:searchbox>, <gcse:searchresults>, atau <gcse:searchbox-only>. Sehingga setelah diganti akan tampak menjadi seperti di bawah ini.


<div id="gcsengine"></div>
<script>
   var gcseDiv = document.getElementById('gcsengine');
   gcseDiv.innerHTML = '<gcse:searchresults-only></gcse:searchresults-only>'
</script>
<script>
  (function() {
    var cx = '0061063966908494606:yeabjpcg';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>

Untuk hasil validasi HTML5 ini bisa Anda lihat untuk validasi HTML5 halaman hasil pencarian Kompi Ajaib DI SINI.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments