Monday, July 21, 2014

Modifikasi google custom search engine (cse)

Menggunakan widget pencarian pada blog atau website sangat berguna agar pengunjung dapat mecari semua konten yang ada pada blog yang kita buat.

Untuk membuat pencarian konten pada blog atau website, pertama kali anda harus mengunjungi situs google custom search engine https://www.google.com/cse/all  dan buat penelusuran khusus. cara membuat google custom search engine CSE akan dibahas pada posting berikutnya.

Langkah-langkah modifikasi CSE.
  1. Laman. Buat laman baru pada blogger dan letakkan kode dibawah ini.
    <script>
      (function() {
        var cx = xxxxxxxxxxxxxxxxxyy:yyyyyyyy';
        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>
  2.  Tata Letak. Beralih ke tata letak, tambahkan gadget dan pilih html/javascript. Letakkan kode dibawah ini.
    <div id='carinyo'>
    <form action='ganti dengan link laman yang telah dibuat pada langkah pertama (1)' class='searchform' id='cse-search-box'>
    <input name='cx' type='hidden' value='partner-pub-xxxxxxxxxxxxxxxxxx:yyyyyyyyyy'/>
    <input name='cof' type='hidden' value='FORID:11'/>
    <input class='searchfield' id='q' name='q' placeholder='Search...' type='text'/>
    <input alt='search' class='searchbutton' name='sa' src='https://lh6.googleusercontent.com/-PYlmbZ-BPy8/Ul4CXFKLlWI/AAAAAAAAB3A/CJxlqHX63DA/s24-no/tombolcari.gif' type='image'/>
    </form>
    </div>
  3. Tempalte. Klik template, pilih edit html. letakkan kode css dibawah ini diatas </head>
    /* http://dokyasde.blogspot.com */
    #carinyo{background:#d3d3d3;padding:10px;margin-top:10px;}
    .searchform{overflow:hidden;position:relative;margin:0px;}
    .searchform {width:99%;margin:0px;display: inline-block;padding:2px;background:#ffffff;overflow:hidden;border:1px solid #cccccc;}
    .searchform input {color:#000;padding:0px;margin:0}
    .searchform .searchfield {width:95%;background:transparent;padding:2px;margin:0;border:0px;outline: none;}
    .searchform .searchbutton{position: absolute;z-index:1;padding:0px;top:1px;right:5px;}
Tulisan berwarna merah adalah id google custom search engine. Silahkan ganti dengan id anda.