Cara Memasang Widget Google Search di Blog

Seperti yang kita ketahui, Google Inc adalah salah satu perusahaan teknologi terbesar didunia, apalagi setelah pihaknya merambah kedunia mobile atau perangkat ponsel android yang didirkan oleh Andy Rubin. Berkat kerja keras Larry Page dan Sergey Brin kini mensin pencari googlepun turut mendapat perhatian dari dunia internet, dengan mengalahkan pesaing-pesaing karibnya seperti Yahoo! dan Bing.

Tidak heran lagi apabila google yang berlamatkan di google.com dinobatkan sebagai situs nomor 1 dunia, karena semua orang mencurahkan sebagian besar waktunya untuk berselancar di search engine, khususnya google, tentunya untuk mencari apa yang mereka butuhkan, tak terkecuali hiburan. Dengan Google rasanya semua pekerjaan di dunia maya terasa lebih mudah, karena hanya dengan beberapa step sederhana saja kita sudah bisa mendapatkan apa yang kita mau.

Untuk mempermudah pengunjung dalam sebuah situs, kini Google juga telah meluncurkan fitur embed atau pasang di website atas widget search enginenya, untuk lebih lengkapnya mari kita simak langkah-langkah dan tentunya kode script dari widget google search engine.

Cara Memasang Widget Google Search di Blog

1. Login Ke Blogger

2. Pilih Tata letak

3. Klik Add Widget

4. Setelah itu pilih HTML/JavaScipt

5. Isi kan Kode Ini pada Box "Konten"

<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.V2_DEFAULT});

  google.setOnLoadCallback(function() {

    var customSearchOptions = {};  var customSearchControl = new google.search.CustomSearchControl(

      '001696901118958966844:mfqbjpm14uk', customSearchOptions);

    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);

    customSearchControl.draw('cse');

  }, true);

</script>

 <style type="text/css">

  .gsc-control-cse {

    font-family: Arial, sans-serif;

    border-color: #FFFFFF;

    background-color: #FFFFFF;

  }

  .gsc-control-cse .gsc-table-result {

    font-family: Arial, sans-serif;

  }

  input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {

    border-color: #D9D9D9;

  }

  input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {

    border-color: #2F5BB7;

    background-color: #357AE8;

    background-image: none;

    filter: none;

  }

  .gsc-tabHeader.gsc-tabhInactive {

    border-color: #CCCCCC;

    background-color: #FFFFFF;

  }

  .gsc-tabHeader.gsc-tabhActive {

    border-color: #CCCCCC;

    border-bottom-color: #FFFFFF;

    background-color: #FFFFFF;

  }

  .gsc-tabsArea {

    border-color: #CCCCCC;

  }

  .gsc-webResult.gsc-result,

  .gsc-results .gsc-imageResult {

    border-color: #FFFFFF;

    background-color: #FFFFFF;

  }

  .gsc-webResult.gsc-result:hover,

  .gsc-imageResult:hover {

    border-color: #FFFFFF;

    background-color: #FFFFFF;

  }

  .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: #1155CC;

  }

  .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: #1155CC;

  }

  .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: #1155CC;

  }

  .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: #1155CC;

  }

  .gsc-cursor-page {

    color: #1155CC;

  }

  a.gsc-trailing-more-results:link {

    color: #1155CC;

  }

  .gs-webResult .gs-snippet,

  .gs-imageResult .gs-snippet,

  .gs-fileFormatType {

    color: #333333;

  }

  .gs-webResult div.gs-visibleUrl,

  .gs-imageResult div.gs-visibleUrl {

    color: #009933;

  }

  .gs-webResult div.gs-visibleUrl-short {

    color: #009933;

  }

  .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: #FFFFFF;

  }

  .gsc-results .gsc-cursor-box .gsc-cursor-page {

    border-color: #CCCCCC;

    background-color: #FFFFFF;

    color: #1155CC;

  }

  .gsc-results .gsc-cursor-box .gsc-cursor-current-page {

    border-color: #CCCCCC;

    background-color: #FFFFFF;

    color: #1155CC;

  }

  .gsc-webResult.gsc-result.gsc-promotion {

    border-color: #F6F6F6;

    background-color: #F6F6F6;

  }

  .gsc-completion-title {

    color: #1155CC;

  }

  .gsc-completion-snippet {

    color: #333333;

  }

  .gs-promotion a.gs-title:link,

  .gs-promotion a.gs-title:link *,

  .gs-promotion .gs-snippet a:link {

    color: #1155CC;

  }

  .gs-promotion a.gs-title:visited,

  .gs-promotion a.gs-title:visited *,

  .gs-promotion .gs-snippet a:visited {

    color: #1155CC;

  }

  .gs-promotion a.gs-title:hover,

  .gs-promotion a.gs-title:hover *,

  .gs-promotion .gs-snippet a:hover {

    color: #1155CC;

  }

  .gs-promotion a.gs-title:active,

  .gs-promotion a.gs-title:active *,

  .gs-promotion .gs-snippet a:active {

    color: #1155CC;

  }

  .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: #009933;

  }

</style>

6. Klik "Save/Simpan", dan selesai.

Demikian informasi terbaru seputar tutorial dan tips trik blogging tentang Cara Memasang Widget Google Search di Blog, semoga bermanfaat, dan selamat mencoba.