Website | Memasang Custom Pencarian Google

Custom Search

Bingung caranya membuat kolom pencarian google yang hasilnya bisa ditampilkan di blog? Sekarang simaklah artikel berikut.

Membuat kolom pencarian google atau yang biasanya dinamakan Google Custom Search sangatlah mudah. Silahkan ikuti langkah-langkah berikut ini:

1.     Masuklah ke akun blogger Anda di www.blogger.com.

2.    Buat widget baru tipe HTML/Java Script untuk menempatkan kolom pencarian.

3.    Paste kode berikut di widget tersebut.

 

<style type="text/css">

@import url(http://www.google.com/cse/api/branding.css);

</style>

<div class="cse-branding-bottom" style="background-color:#FFFFFF;color:#000000">

  <div class="cse-branding-form">

    <form action="http://www.budairi.com/2012/11/pusat-pencarian-referensi-islami.html" id="cse-search-box">

      <div>

        <input type="hidden" name="cx" value="partner-pub-6615796742068982:4795321809" />

        <input type="hidden" name="cof" value="FORID:10" />

        <input type="hidden" name="ie" value="UTF-8" />

        <input type="text" name="q" size="55" />

        <input type="submit" name="sa" value="Search" />

      </div>

    </form>

  </div>

  <div class="cse-branding-logo">

    <img src="http://www.google.com/images/poweredby_transparent/poweredby_FFFFFF.gif" alt="Google" />

  </div>

  <div class="cse-branding-text">

    Custom Search

  </div>

</div>

<script type="text/javascript" src="http://www.google.com/cse/query_renderer.js"></script>

<div id="queries"></div>

<script src="http://www.google.com/cse/api/partner-pub-6615796742068982/cse/4795321809/queries/js?oe=UTF-8&amp;callback=(new+PopularQueryRenderer(document.getElementById(%22queries%22))).render"></script>

4.    Buat entri atau postingan baru untuk menampilkan hasil pencarian.

Paste kode berikut pada mode HTML.

 

<div id="cse-search-results"></div>

<script type="text/javascript">

  var googleSearchIframeName = "cse-search-results";

  var googleSearchFormName = "cse-search-box";

  var googleSearchFrameWidth = 800;

  var googleSearchDomain = "www.google.co.id";

  var googleSearchPath = "/cse";

</script>

<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

 

5.    Publish atau terbitkan entri Anda

6.    Lihat postingan tersebut dan ambil linknya/urlnya. Gantilah kode yang berwarna merah diatas dengan link/url postingan yang Anda buat tadi.

7.    Simpan widget Anda. Silahkan dicoba.

 

Contoh hasilnya adalah seperti form yang berada dibawah (footer). Kalau kurang jelas, silahkan diskusi lewat komentar.