Validasi HTML5 Google Custom Search Engine

Validasi HTML5 Google Custom Search Engine

Bola Hero Gawai

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

26 Comments Add Comment

Keduanya mungkin... hehehe.

Balas

Keren.. dulu pernah pake tapi error jadi saya lepas.. sekarang udh bisa divalidasi, :)

Balas

Wah saya gak kebagian apa-apa gak apalah, yang terpenting saya
Dapat Ilmu dari Kang Adhy, di tutorial Validasi HTML 5 Google custom ini
Terima kasih Kang atas artikelnya.

Balas

Iya mas sekarang sudah bisa valid :) silahkan dicoba lagi.

Balas

Sama-sama kang Saud semoga bisa dimengerti :)

Balas

Selamat Siank kang
saya izin langsung ke TKP ajjha kang,,_

Balas

Met siang juga mas :)
Silahkan dicoba, semoga bisa dimengerti.

Balas

Lngsung d bnerin nich Kang...

Balas

kang adhy maniak validasi nih hehe

Balas

Wah, info validasi lagi nih Kang.....perlu dicoba. :D

Balas

terimakasih mas,sudah saya perbaiki dan berhasil

Balas

Silahkan mas :)

Balas

Waduuhh hehehehee :D

Balas

Silahkan mas dicoba :)

Balas

Siippp mas :-bd

Balas

Assallammulaikum..Izin ya Mas Adhy saya mau coba moga saya berhasil.

Balas

semua postingan saya selalu diawalannya ada kode ini, yang bikin ngga bisa valid disemua artikel apapun yang saya posting termasuk validasi search engine ini kang...gimana nih?

<div dir="ltr" style="text-align: left;" trbidi="on">

Balas

punten kang kode diatas itu belum terpecahkan, cari kemana mana ngga ada deh....:p

Balas

Kang coba edit postingannya kemudian alihkan ke editor HTML, kemudian hapus kode
<div dir="ltr" style="text-align: left;" trbidi="on"> yang terletak paling atas kemudian jangan lupa hapus penutupnya di paling bawah
</div>

Balas

setelah dicobakan, ternyata saat mau publishnya ngga boleh pake compose, sebab kalo pake compose kode itu muncul lagi, HARUS pake edit HTML...baru dia hilang ya kang....emang semua blogger gituh cara publish nya ya kang?atau setelan blognya yang kudu dirubah kah?

Balas

Betuk kang saya sendiri selalu begitu, tulis artikel dulu dengan compose setelah selesai kemudian alihkan ke HTML untuk diedit misalnya menghapus border="0" pada gambar atau memberi title pada link, setelah edit selesai kemudian publish masih dengan posisi html.

Balas

Silahkan dicoba mas.

Balas

Silahkan mas :)

Balas

Izin baca-baca dulu kang...
masih ragu untuk nyoba karena masih belajar ngeblog..
makasih kang, sukses sllu....

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×