Cara Membuat Tombol Search Seperti Google

Cara Membuat Tombol Search Seperti Google
Di Posting Oleh : Admin
Kategori : Panduan Blog Blog Tutorial, Teknologi dan Kesehatan: Mangaip Blog

cara membuat tombol search seperti google

Salam Para Labeltutorial.com - Pada Malam Yang sesunyi ini aku blogging tiada yang menemani hehe jadi nyanyi , oke langsung aja nih kali ini saya akan share tentang tutorial blogger mengenai cara membuat tombol search seperti google , sebenernya sih udah banyak yang share buat tutorial ini , tapi apa salahnya kan ditulis ulang secara lengkap lagi itung itung buat dokumentasi oke lanjut aja ya ke tutorialnya



Silahkan klik demo tombol search seperti google dibawah ini :


Demo Tombol Search seperti google

Demo

Gimana tertarik gak ? kalo tertarik lanjut simak baik baik ya script berikut :Copy kode css diberikut diatas kode ]]></b:skin>

#search {background: #fff;border-radius: 2px;}#search-form {color:gray;width:50%;padding:6px 70px 6px 10px;font:14px Arial;transition: all 0.2s linear 0s;margin:-10px 0 10px;border:1px solid #ccc;border-radius:2px;}.search-button,.search-button:hover{background-color:#4D90FE;width:60px;padding:2px 5px;margin:5px 0 0 -63px;top:4px;border-radius:0 2px 2px 0;font-size:13px;cursor:pointer;border:none;position:relative;}#search-form:hover{border:1px solid #aaa}#search-form:focus{border:1px solid #4D90FE;outline:none;color:black;}

Kemudian silahkan copy kode HTML dibawah ini dan taruh kodenya diwidget atau dimana anda ingin menampikannya :

<div id='search'>
<form id='searchform' action='/search' method='get' target='_blank'>
<input id='search-form' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here ...'/>
<button type='submit' class='search-button' title='Search'><img alt='search button' height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXUSKIrtBbxjQzE62D6u-3pskMLE11vSNvvDxNZE1BbvdDF3ZoomgnrXDzAnqrCKH6tYNoFZ3HOScL9s-cRJ2mLsPUnYnbllHpPltB4eCSJDtoNCq_Uu57JJvO-KvDqevuCHCSjIN5uJlv/s1600/search.png' title='Search' width='21'/>
</button>
</form>
</div>

Nah ini hanya dari segi tampilannya saja. jika anda ingin menambahkan dengan Fungsi Custom Google Search bisa saja, yang dimaksud dengan menambahkan fungsi google search ini yaitu jika anda menggunakan tombol search ini akan menampikan hasil seperti google coba lihat gambar berikut :

Cara membuat tombol Search Seperti Google

Simak baik baik tutorial Cara menambahkan fungsi Custom  google search berikut ini :

1. Anda pergi kehalaman ini https://www.google.com/cse/all , login dahulu menggunakan account google
2. Klik tombol Add 
3. Lalu isi Situs yang akan ditelusuri : www.bloganda.com misalnya

Info :
 Anda dapat menambahkan salah satu dari ini :

Laman individual: www.bloganda.com/page.html
Keseluruhan situs: www.mysite.com/*
Bagian situs: www.example.com/docs/* atau www.example.com/docs/
Keseluruhan domain: *.example.com

4. lalu tekan tombol Buat / Create
5. tunggu sebentar nah saat ini tombol sudah jadi sekarang tinggal edit tampilannya
6. lihat menu di kiri web google tersebut lalu pilih tampilan dan nuansa pada tab tata letak silahkan pilih Hasil saja

tips : nah setelah dibagian ini anda bisa tambahkan yang lainnya sesuai keinginan anda

7. setelah itu klik tombol simpan dan dapatkan kode di bawah yang akan menghasilkan kode berikut :

sebagai contoh :

<script>
  (function() {
    var cx = '00643842075734674704678:kqb9kje_vdw';
    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:search></gcse:search>

8. setelah itu sekarang kita edit kode tersebut dengan kode yang sudah ada

simak baik baik ya , Sebelumnya kan kode searchnya seperti ini :

<div id='search'>
<form id='searchform' action='/search' method='get' target='_blank'>
<input id='search-form' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here ...'/>
<button type='submit' class='search-button' title='Search'><img alt='search button' height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXUSKIrtBbxjQzE62D6u-3pskMLE11vSNvvDxNZE1BbvdDF3ZoomgnrXDzAnqrCKH6tYNoFZ3HOScL9s-cRJ2mLsPUnYnbllHpPltB4eCSJDtoNCq_Uu57JJvO-KvDqevuCHCSjIN5uJlv/s1600/search.png' title='Search' width='21'/>
</button>
</form>
</div>

ganti kode tersebut dengan kode dibawah ini :

<div id='search'>
<form action='http://www.labeltutorial.com/p/result.html' id='cse-search-box'>
<input type='hidden' name='cx' value='partner-pub-00643842075734674704678:kqb9kje_vdw' />
<input type='hidden' name='cof' value='FORID:10' />
<input type='hidden' name='ie' value='ISO-8859-1' />
<input id='search-form' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here ...'/>
<button type='submit' class='search-button' title='Search'><img alt='search button' height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXUSKIrtBbxjQzE62D6u-3pskMLE11vSNvvDxNZE1BbvdDF3ZoomgnrXDzAnqrCKH6tYNoFZ3HOScL9s-cRJ2mLsPUnYnbllHpPltB4eCSJDtoNCq_Uu57JJvO-KvDqevuCHCSjIN5uJlv/s1600/search.png' title='Search' width='21'/>
</button>
</form>
</div>

Note :
1. Ganti  http://www.labeltutorial.com/p/result.html
dengan url halaman yang ingin menampilkan result google anda
2. Ganti  00643842075734674704678:kqb9kje_vdw
dengan id yang diberikan google costum search engine

9. Setelah itu simpan widget dan lihat hasilnya

oke sekian tentang tutorial cara membuat tombol search seperti google ini - salam para labeltutorial.com

Thanks To : Kompiajaib.com