Cara Pasang dan Modifikasi Tampilan Google Custom Search Dengan CSS

July 26, 2015 /
Google Custom Search — Bagi seorang blogger, kemudahan pengunjung dalam menavigasi situsnya merupakan hal yang mutlak dan penting untuk diperhatikan. Salah satu caranya adalah dengan disediaknya alat telusur untuk mencari informasi yang dibutuhkan.

Umumnya, setiap template yang disediakan oleh para pembuatnya sudah disisipkan alat pencarian tersebut. Baik itu bawaan blogger dengan menu navbar-nya, atau dengan cara menambahkan widget search melalui tata letak/layout dengan menggunakan Google Custom Search atau Google Pencarian Kustom, atau ada juga alat pencarian yang sudah di modifikasi sedemikian rupa oleh pembuatnya.

Dari kesemua cara dan alat telusur tersebut, Google Custom Search merupakan salah satu alat telusur yang banyak digunakan oleh sejumlah blog. Salah satunya, tidak lain dan tidak bukan adalah blog gue yang satu ini bray.

Alasan gue menggunakan GCSE (Google Custom Search Engine) ini karena tingkat relevansi dari hasil pencarianya cukup memuaskan (oh..yes). Selain itu, tampilanya pun menurut gue pribadi sama sekali tidak menganggu karena itu semua bisa disesuaikan. Lalu bagamaina cara dan langkah-langkahnya dalam membuat GCSE sendiri?


Langkah 1. Go to Dashboard Custom Search


  • Buka tautan link ini https://cse.google.com/cse/create/new di tab browser baru.
Langkah 1. Membuat Google Custom Search
Add/Buat Mesin Telusur Baru


Langkah 2. Sesuikan Tampilan Google Custom Search dengan Template yang Digunakan


Terdapat sejumlah opsi yang ditawarkan setelah selesai membuat mesin telusur google. Pilihlah opsi untuk merubah tampilan (modifikasi) google custom search engine yang barusan udah elu buat.

Langkah 2. Modifikasi Tampilan Google Custom Search
Sesuaikan dengan selera masing-masing

PENTING!
Bagi elu yang menginginkan Google Custom Search Engine yang sama dengan blog ini. Pilihlah tema "minimalist" pada pengaturan tema ( no. 3 ).

Kemudian pilihlah Simpan & Dapatkan Kode.

Kode tersebut akan tampak seperti ini :


<script>
  (function() {
    var cx = 'BeteGakSihxxxxxxxxxxx:xxxxxxxxxxx';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

Perhatikan kode yang ditandai, kode tersebut merupakan ID mesin telusur elu nantinya.


Langkah 3. Penerapan di Blogger


  • Masuk ke dashboard Blogger.
  • Pilih Template dan pastikan elu udah melakukan back-up terlebih dahulu.
  • Kemudian tempatkan script dibawah ini tepat sebelum </body>


<script type='text/javascript'>
!function(){var t="014265316624032032492:hr4vn93gfgk",e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src=("https:"==document.location.protocol?"https:":"http:")+"//cse.google.com/cse.js?cx="+t;var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(e,c)}();
</script>

  • Perhatikan kode yang ditandai, dan ganti dengan ID mesin telusur punya elu.
  • Selanjutnya, elu tinggal menempatkan kode GCSE dibawah ini tepat dimana elu ingin meletakan alat telusur google tersebut.


<div class='gcsecustom'>
<gcse:search/>
</div>

Notes :
Bagi elu yang menggunakan template yang sama dengan blog BeteGakSih, yaitu template Vienna Lite kepunyaan Arlina Design. Elu cukup meletakan kode tersebut tepat dibawah <div class='sidebar-inner'>

Untuk memodifikasi tampilan Google Custom Search Engine, elu cukup mambahkan kode CSS berikut ini tepat sebelum </b:skin> atau </style> :


/* Google Custom Search Engine */
.gcsecustom{display:block;position:relative;width:100%;clear:both;margin-bottom:10px;border-bottom:1px solid #e3e3e3;}
div#___gcse_0,.gsc-control-cse div,input.gsc-search-button,input.gsc-search-button:hover,input.gsc-search-button:focus,.gsc-search-box-tools .gsc-clear-button{-webkit-box-sizing:initial;-moz-box-sizing:initial;box-sizing:initial}
table.gsc-search-box,.gcsecustom table{margin:0!important}
.cse .gsc-control-cse,.gsc-control-cse{font-family:&#39;Open Sans&#39;;background-color:transparent;border:0!important;padding:0!important;}
.cse form.gsc-search-box, form.gsc-search-box {padding:10px 0!important;}
.cse table.gsc-search-box td.gsc-input, table.gsc-search-box td.gsc-input {padding-right:5px!important;}
.cse input.gsc-input, input.gsc-input{border:1px solid #e3e3e3!important;font-size:14px!important;padding:6px 8px!important;transition:all .4s}
.cse input.gsc-input, input.gsc-input{border-color:#ccc!important;}
.cse input.gsc-search-button,input.gsc-search-button{font-family:inherit;font-size:11px;color:#fff;font-weight:bold;padding:0 8px;height:27px;min-width:34px!important;background-color:#4399cd!important;border:1px solid #4399cd!important;cursor:pointer;border-radius:0!important;-moz-border-radius:0!important;-webkit-border-radius:0!important}
td.gsc-clear-button {display:none;}

  • Terakhir, Simpan.

That's It! dan selamat memodifikasi kembali jika dirasa masih ada yang kurang terkait cara memodifikasi tampilan google custom search dengan CSS ini.Yo bay!
Previous
Next Post »

Mau dapetin update-an terbaru untuk setiap artikel dan tulisan menarik dari blog Bete Gak Sih?

Subscribe aja bray!

1 komentar:

Write komentar
08 August, 2015

Ooo ternyata asal usul custom google search dari sini

Reply
avatar