Google Search Untuk Blog

Ok semua, hari ini tuan punya blog warna coklat ini akan mengajar bagaimana hendak memasukkan kotak carian Google di dalam blog seperti yang terdapat di blog ini..hehe. Macam cikgu yang mengajar di sekolah pulak..haha. Aku tahu ramai yang sudah mempunyai kotak carian di blog dan ia memudahkan pembaca untuk mencari entry-entry lama yang mungkin berkaitan dengan apa yang hendak dicarinya. Namun begitu, kebanyakkan kotak carian akan membawa pengguna ke page baru yang hanya dipenuhi dengan hasil carian sahaja. Mungkin ada sesetengah pengguna yang terpaksa menunggu browsernya untuk loading dan tengok sahaja page yang berwarna putih itu sehingga selesai hasil carian oleh kerana capaian internetnya yang lambat.

Bagi blogger yang menggunakan Blogger sebagai hosting blog, mungkin widget ini boleh dijumpai di bahagian add a gadget, namun tidak semua template yang boleh menyokong gadget ini. Ini adalah kerana hasil carian akan keluar di bahagian atas sekali dan ia nampak buruk..haha.

Tanpa membuang masa, mari kita mulakan sesi mengedit blog..haha. Oh lupa, kalau nak tengok demo, boleh cuba taip apa-apa di kotak carian di blog aku. Dijamin tidak akan keluar seperti dalam gambar tadi..haha.

1. Anda perlu mendapatkan Google API Key. Boleh dapatkan di sini. Masukkan link blog anda semasa proses sign up. Selepas itu, anda akan diberi API Key, boleh save dalam notepad atau biarkan sahaja.
2. Kita akan mulakan proses menambah kod di dalam blog. Download kod di sini.
   
3. Dalam kod itu, sila gantikan *API KEY ANDA* dengan API Key yang telah anda dapat tadi, *LINK BLOG ANDA* dengan link ke blog anda dan *LABEL* dengan label yang akan anda gunakan untuk tajuk hasil carian blog anda. Rujukan : Gunakan Blog saya atau blog ini atau this blog.
   
4. Copy kod itu tadi dan letakkan baik-baik di dalam blog anda. Klik pada Layout dan edit html kemudian paste kod itu tadi sebelum </head>. Tidak perlu untuk expand widget templates.
5. Seterusnya, kita akan meletakkan kotak carian di dalam blog. Pergi ke page element dan pilih add a gadget dan pilih html/javascript. Letakkan tajuk yang anda rasa best dan paste kod ini di dalam content :
   
<div id="searchcontrol">Loading...</div>
Boleh tukar perkataan loading itu dengan apa-apa sahaja kerana kotak carian akan muncul di situ dan perkataan loading akan hilang.
6. Langkah terakhir kita akan meletakkan hasil carian di blog. Pengguna boleh mendapatkan hasil carian tanpa pergi ke page lain. Macam langkah 5, anda perlu klik add a gadget dan pilih html/javascript. Kemudian, paste kod ini di bahagian content. Tidak perlu meletakkan tajuk kerana ia akan menjadi lebih buruk. Gadget itu hendaklah diletakkan di bahagian atas blog post untuk kesan macam di blog coklat ini.
   
<div id="searchResults"></div>

Hasilnya, anda akan melihat seperti ini :

Jika anda mahir dengan kod-kod HTML dan CSS, anda boleh mengubah margin atau design pada hasil carian. Anda juga boleh menambah tab untuk hasil carian. Dalam kod tadi, hanya 2 hasil caria yang akan diperoleh iaitu hasil carian di blog dan seluruh internet. Anda boleh menambah untuk mencari video di Youtube atau mencari gambar di internet dari blog anda. Tapi, mesti taknak kan? haha. Ok la, itu sahaja untuk kali ini.

P.S : Kod ini juga boleh digunakan untuk blog selain Blogger. Hanya perlu mendapatkan API Key dari Google API sahaja.