Minggu, 18 Maret 2012

Cara Pasang Pencarian Pintar Google untuk Blog



Pencarian Pintar Google untuk Blog
Banyak search widget yang tidak berfungsi secara maksimal. Kadang beberapa search widget malah gak jalan dan tidak mau nyambung sama blog kita, artinya tidak memberikan search result untuk blog kita sendiri. Lalu buat apa kita pasang search widget kalau gak nyambung. Tentunya ini membuat kita kadang dongkol sendiri, yang jelas widget itu tidak berguna dan memenuhkan template saja.

Sekarang saya akan terangkan cara pasang pencarian pintar google untuk blog. Widget ini akan mencari atau memberikan result page yang berhubungan dengan artikel kita yang diindex google. Intinya sama dengan search engine google, namun kita hanya memasangnya di blog kita. Tampilannya sama dengan widget search bawaan blogger namun lebih baik dan dapat kita setting sesuai keinginan.

Sebelumnya coba dulu masukkan kata kunci pencarian atau judul artikel apa saja pada Pencarian Pintar Google untuk Blogonol yang terdapat sesudah artikel terkait. Bagaimana....tertarik? Ok sekarang mari kita bahas cara pasang pencarian pintar google untuk blog, ikuti langkah berikut

Kunjungi Google Custom Search
Klik Create a Custom Search Engine, seperti tampilan berikut

Pencarian Pintar Google untuk Blog

Selanjutnya isi form seperti pada gambar berikut

Pencarian Pintar Google untuk Blog
klik kanan - view image: untuk memperbesar gambar
 
Selanjutnya pilih bentuk tampilan yang disukai. Saya pilih minimalis biar sesuai dengan template saya. Lanjutkan dengan klik next. Lihat gambar di bawah.

Pencarian Pintar Google untuk Blog
klik kanan - view image: untuk memperbesar gambar

Selanjutnya klik look and feel, seperti gambar di bawah ini

Pencarian Pintar Google untuk Blog
klik kanan - view image: untuk memperbesar gambar

Selanjutnya pilih layout atau penempatan sesuai yang diinginkan. Kalau saya pilih seperti gambar di bawah ini, lebih simple alias gak ribet. Jangan lupa klik Save and Get Code untuk melanjutkan atau mendapatkan kode widgetnya.

Pencarian Pintar Google untuk Blog
klik kanan - view image: untuk memperbesar gambar
Pencarian Pintar Google untuk Blog
klik kanan - view image: untuk memperbesar gambar

Selanjutnya Log in ke blog
Klik Rancangan
Klik Edit HTML
Centang Expand Template Widget
Setting dulu kode widget anda sperti ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h4>Pencarian Pintar Google untuk Blogonol</h4>
KODE WIDGET SEARCH ANDA
</b:if>

menjadi seperti di bawah ini

<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 : 'id', style : google.loader.themes.SHINY});
  google.setOnLoadCallback(function() {
    var customSearchOptions = {};  var customSearchControl = new google.search.CustomSearchControl(
      '013238910433779632639:ofbvwfm6whm', customSearchOptions);
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    customSearchControl.draw('cse');
  }, true);
</script>

<style type="text/css">
  .gsc-control-cse {
    font-family: Georgia, serif;
    border-color: #ff0000;
    background-color: #33ffff;
  }
  .gsc-control-cse .gsc-table-result {
    font-family: Georgia, serif;
  }
  input.gsc-input {
    border-color: #3333ff;
  }
  input.gsc-search-button {
    border-color: #3333ff;
    background-color: #D0D1D4;
  }
  .gsc-tabHeader.gsc-tabhInactive {
    border-color: #ff0000;
    background-color: #3366ff;
  }
  .gsc-tabHeader.gsc-tabhActive {
    border-color: #3333ff;
    background-color: #66ff99;
  }
  .gsc-tabsArea {
    border-color: #3333ff;
  }
  .gsc-webResult.gsc-result,
  .gsc-results .gsc-imageResult {
    border-color: #ff0000;
    background-color: #cccccc;
  }
  .gsc-webResult.gsc-result:hover,
  .gsc-imageResult:hover {
    border-color: #33ff33;
    background-color: #33cc00;
  }
  .gsc-webResult.gsc-result.gsc-promotion:hover {
    border-color: #33ff33;
    background-color: #33cc00;
  }
  .gs-webResult.gs-result a.gs-title:link,
  .gs-webResult.gs-result a.gs-title:link b,
  .gs-imageResult a.gs-title:link,
  .gs-imageResult a.gs-title:link b {
    color: #3333ff;
  }
  .gs-webResult.gs-result a.gs-title:visited,
  .gs-webResult.gs-result a.gs-title:visited b,
  .gs-imageResult a.gs-title:visited,
  .gs-imageResult a.gs-title:visited b {
    color: #3333ff;
  }
  .gs-webResult.gs-result a.gs-title:hover,
  .gs-webResult.gs-result a.gs-title:hover b,
  .gs-imageResult a.gs-title:hover,
  .gs-imageResult a.gs-title:hover b {
    color: #3333ff;
  }
  .gs-webResult.gs-result a.gs-title:active,
  .gs-webResult.gs-result a.gs-title:active b,
  .gs-imageResult a.gs-title:active,
  .gs-imageResult a.gs-title:active b {
    color: #3333ff;
  }
  .gsc-cursor-page {
    color: #3333ff;
  }
  a.gsc-trailing-more-results:link {
    color: #3333ff;
  }
  .gs-webResult .gs-snippet,
  .gs-imageResult .gs-snippet,
  .gs-fileFormatType {
    color: #000000;
  }
  .gs-webResult div.gs-visibleUrl,
  .gs-imageResult div.gs-visibleUrl {
    color: #000000;
  }
  .gs-webResult div.gs-visibleUrl-short {
    color: #000000;
  }
  .gs-webResult div.gs-visibleUrl-short {
    display: none;
  }
  .gs-webResult div.gs-visibleUrl-long {
    display: block;
  }
  .gs-promotion div.gs-visibleUrl-short {
    display: none;
  }
  .gs-promotion div.gs-visibleUrl-long {
    display: block;
  }
  .gsc-cursor-box {
    border-color: #ff0000;
  }
  .gsc-results .gsc-cursor-box .gsc-cursor-page {
    border-color: #ff0000;
    background-color: #cccccc;
    color: #3333ff;
  }
  .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
    border-color: #3333ff;
    background-color: #66ff99;
    color: #3333ff;
  }
  .gsc-webResult.gsc-result.gsc-promotion {
    border-color: #D2D6DC;
    background-color: #D0D1D4;
  }
  .gsc-completion-title {
    color: #3333ff;
  }
  .gsc-completion-snippet {
    color: #000000;
  }
  .gs-promotion a.gs-title:link,
  .gs-promotion a.gs-title:link *,
  .gs-promotion .gs-snippet a:link {
    color: #0066CC;
  }
  .gs-promotion a.gs-title:visited,
  .gs-promotion a.gs-title:visited *,
  .gs-promotion .gs-snippet a:visited {
    color: #0066CC;
  }
  .gs-promotion a.gs-title:hover,
  .gs-promotion a.gs-title:hover *,
  .gs-promotion .gs-snippet a:hover {
    color: #0066CC;
  }
  .gs-promotion a.gs-title:active,
  .gs-promotion a.gs-title:active *,
  .gs-promotion .gs-snippet a:active {
    color: #0066CC;
  }
  .gs-promotion .gs-snippet,
  .gs-promotion .gs-title .gs-promotion-title-right,
  .gs-promotion .gs-title .gs-promotion-title-right *  {
    color: #333333;
  }
  .gs-promotion .gs-visibleUrl,
  .gs-promotion .gs-visibleUrl-short {
    color: #5F6A73;
  }
</style>
     
Masukkan kode tersebut di bawah kode
<data:post.body/> atau <p><data:post.body/></p>
bisa juga anda masukkan di bawah kode
<div class='post-footer-line post-footer-line-2'>
Selanjutnya klik Simpan Template dan lihat hasilnya
Selamat mencoba dan sukses selalu...