Rabu, 31 Desember 2014

Membuat Search Form Google Dengan Framework Bootstrap

Boostrap Search Engine
Search Engine adalah tool penting pada suatu website dan blog atau pun hal lainnya, dimana fungsi utamanya adalah sebagai alat mempermudah pencarian suatu kategori tertentu maka dari itu kali ini saya akan membagikan Tutorial Membuat Search Engine Custom Google dengan menggunakan framework bootstrap sebagai media utamanya. referensi lain tentang Bootsrap : http://getbootstrap.com/

Pertama Anda harus menambahkan link bootsrap pada blog Anda. kunjungi: http://getbootstrap.com/getting-started/ lalu pilih salah satu Bootsrap CDN dan pasang link cdn bootsrap di atas <style type='text/css'> atau di atas <b:skin><![CDATA[

Kedua kunjungi : https://www.google.com/cse/ buat lah google custom search engine disana. Tutorial Membuat Google Custom Search Engine (CSE) pada langkah ke delapan pada tutorial membuat google custom search engine abaikan saja karena kita akan membuat dengan form framework bootstrap.

Ketiga buatlah halam baru lalu pilih opsi HTML dan pastekan syntax/code Search Engine Custom Google disana dan simpan.

Langkah Keempat perhatikan syntax berikut:


<form action="http://ziixon93.blogspot.com/p/search-result.html" target="_blank" class="navbar-form" role="search">
<div class="input-group">
<input name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type="text" class="form-control" placeholder="Search for..." />
<input type="hidden" name="cx" value="partner-pub-005878528859453139609:g0wfcwle6sw" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go!</button>
</span>
</div>
</form>

Pada http://ziixon93.blogspot.com/p/search-result.html ganti dengan url search sobat yang telah di buat tadi dan untuk 005878528859453139609:g0wfcwle6sw ganti dengan ID google custom search engine kalian.

Tempatkan kode tersebut terserah kalian, jika pada blog ini Search Form terdapat di sidebar dan saya menggunakannya sebagai widget.
Share:

Iqbar Alhakim

Web Developer

"Saya penggemar musik, kopi, dan teknologi. Kesaharian saya membosankan."

"Memilih ketenangan dengan berbagi."

Job Description

HTML, CSS, PHP, Web Design, Linux, dan lainnya.

2.000

Followers

259

Following

27

Projects