Cara Membuat Google Custom Search Valid HTML5

Membuat Google Custom Search Valid HTML5

Cara Membuat Google Custom Search Valid HTML5 di blogspot tanpa sulit dan tanpa harus saya jelaskan panjang lebar, karena caranya sangat simple. Untuk membuat valid html5 pada widget Google Custom Search berarti di blog Anda sudah ada kodenya, dan buat yang belum pasang Google Custom Search silakan buat dulu widgetnya dengan cara Membuat Google Custom Search Valid HTML5 berikut ini:

Cara Membuat Google Custom Search Valid HTML5

Sebelum Anda mengikuti cara membuat Google Custom Search (CSE), pastikan Anda sudah membaca artikel Saya sebelumnya yang membahas tentang Cara Menerapkan HTML 5 di Template Blogspot, jika sudah silakan lanjut kesini:

Masuk dan login di Google Custom Search ....
Setelah login, pilih "Create a custom Search Engine...
Selanjutnya silakan lengkapi form yang disediakan untuk Set up your search engine...

Describe your search engine

• Name = Isi dengan Judul Blog AndA ....
• Description = Deskripsi blog Anda..
• Language = Bahasa yang digunakan di blog.

Define your search engine

Site to search = Isi dengan URL blog Anda... contohnya : mahesaputra-id.blogspot.com

Select an edition

Pilih yang FREE (Standard Edition) kalau maunya yang gratisan (iklan google akan muncul pada saat pencarian)

Kemudian Centang  tanda kotak penanda I have read and agree to the Terms of Service. ...lagi sekarang Klik NEXT

Pada Bagian Try it out:

Choose or customize a style

Pilihlah tampilan muka google custom search nya sesuka hati Anda.. Klik Customize....(untuk mengkostumisasi lagi jika tdak cocok dengan tampilan dari hasil javascriptnya.
Kemudian Klik NEXT..

Bagian Get the code

Copy Google custom Search CSS/Javascript Code yang ada di dalam Textarea Box, seperti ini contoh javascriptnya:

<div id="cse" style="width: 100%;">Loading</div> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load('search', '1', {language : 'en', style : google.loader.themes.V2_DEFAULT}); google.setOnLoadCallback(function() { var customSearchOptions = {}; var customSearchControl = new google.search.CustomSearchControl( '0176844XXXXXXXXXXXX:loylon7c8zk', customSearchOptions); customSearchControl.setResultSetSize(google.search.Searc h.FILTERED_CSE_RESULTSET); customSearchControl.draw('cse'); }, true); </script>

<style type="text/css"> .gsc-control-cse { font-family: Arial, sans-serif; border-color: #FFFFFF; background-color: #FFFFFF; } .gsc-control-cse .gsc-table-result { font-family: Arial, sans-serif; }......</style>

Nah sekarang masuk ke dashboard blog Anda dan buka template, kemudian edit dan copy kode css yang merupakan bagian dari kode javascript tadi tepatnya css seperti ini:

<style type="text/css"> .gsc-control-cse { font-family: Arial, sans-serif; border-color: #FFFFFF; background-color: #FFFFFF; } .gsc-control-cse .gsc-table-result { font-family: Arial, sans-serif; }......</style>

Letakan kode CSS tersebut diatas kode </head> atau dibawah kode </b:skin> dan klik save/simpan template.

Selanjutnya buat gadget baru untuk widget Google Custom Search Anda dengan cara menambahkan atau Add Gadget -> pilih CSS/Javascript, kemudian tempatkan kode Javascript Google Custom Search Anda pada area kosong yang tersedia, seperti ini contoh kode javascript yang harus Anda tempatkan:

<div id="cse" style="width: 100%;">Loading</div> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load('search', '1', {language : 'en', style : google.loader.themes.V2_DEFAULT}); google.setOnLoadCallback(function() { var customSearchOptions = {}; var customSearchControl = new google.search.CustomSearchControl( '0176844XXXXXXXXXXXX:loylon7c8zk', customSearchOptions); customSearchControl.setResultSetSize(google.search.Searc h.FILTERED_CSE_RESULTSET); customSearchControl.draw('cse'); }, true); </script>

Save dan lihat hasilnya.

Selanjutnya agar tetap valid html5, Anda harus mengedit template lagi karena penambahan widget baru selalu mengakibatkan error atau tidak valid di W3, caranya Edit HTML template Anda kemudian cari dan hapus kode <b:include name='quickedit'/>, lakukan pencarian lagi kode tersebut khawatirnya masih ada lagi pada widget lainnya dan hapus saja semua kode <b:include name='quickedit'/> nya, terakhir Save template dan lihat hasilnya.

Mari kita jalin keharmonisan pertemanan antar sesama blogger dengan saling menghargai karya masing-masing, dan mohon jika Anda melakukan Copy-Paste artikel ini agar mencantumkan link artikel ini atau link homepage blog ini sebagai sumber penulisan yang Anda kutip.