Ditulis oleh: Ditulis pada: 4/19/2014
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.
Baca juga: Membuat Google Search Engine Di Blog 2014
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.
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>