Membuat Google Custom search Engine Pada Template Wuzz

Table of Contents

memasang google custom search engine di blog

Siapa sangka, sesuatu yang terlihat sederhana — yaitu Widget kotak pencarian di bagian atas blog — ternyata menjadi perjalanan panjang penuh tantangan yang saya alami sendiri di situs Lintasiana.com. Saat pertama kali membangun blog menggunakan template Wuzz yang terkenal ringan, cepat, dan bersih kodenya, saya pikir tinggal ganti sedikit pengaturan atau salin tempel kode dari mana saja, bereslah urusan pencarian. Ternyata dugaan saya salah besar — dan pengalaman ini saya tuliskan lengkap agar kamu tidak perlu menempuh jalan yang sama berliku‑liku seperti saya.

Pada awalnya saya hanya ingin satu hal sederhana: membuat widget Google penelusuran custom di Blogger yang hasilnya menampilkan konten dari situs saya saja, tampilannya rapi serasi dengan desain, dan tetap bisa diandalkan. Saya mencoba berbagai panduan tentang memasang Google Penelusuran Custom Engine (CSE) di blog — salin kode ini, tambahkan skrip itu, ubah di sini, ubah di sana. Hasilnya? Kadang tombol cari diam saja ditekan, kadang muncul kotak bertumpuk menutupi seluruh layar yang jelek sekali dilihat, kadang malah beralih ke halaman pencarian Google yang membuat pengunjung meninggalkan situs kita — padahal saya ingin membuat kotak pencarian di Blogger yang tetap bekerja di dalam situs sendiri.

Belum selesai masalah tampilan, muncul masalah yang jauh lebih serius: skor performa halaman yang dulunya sempurna — stabil di angka 99/100 — tiba‑tiba anjlok jatuh bebas menjadi hanya 73 saja! Di halaman kecepatan terlihat jelas peringatan: “Memblokir penampilan pertama”, “Skrip berukuran besar”, “Menunda pemuatan yang tidak perlu”. Ternyata saya ceroboh — menaruh skrip lengkap Google CSE di bagian paling atas halaman, dimuat setiap kali halaman dibuka padahal belum tentu ada yang mau mencari sesuatu. Itulah pelajaran paling mahal yang saya pelajari: cara memasang Google Custom Search Engine di blog tidak sekadar pasang kode — tapi juga harus tahu kapan, di mana, dan bagaimana memuatnya agar situs tetap ringan dan cepat.

Memahami Masalah Pencarian Bawaan Template Wuzz

Template Wuzz memang luar biasa — kode bersih, ringkas, dirancang khusus untuk kecepatan & SEO terbaik. Form pencarian aslinya menggunakan sistem pencarian bawaan Blogger yang sederhana namun memiliki keterbatasan: hasilnya kurang relevan, sering menampilkan halaman lama atau duplikat, tidak ada filter yang kita inginkan, dan tampilannya standar sekali. Itulah sebabnya keinginan saya untuk menggantinya dengan mesin pencari milik Google sendiri — Custom Search Engine atau CSE — sangat masuk akal: Google tahu persis mana halaman milik kita, urutannya paling tepat, dan kita bisa menyesuaikan tampilannya.

Namun di sinilah perangkapnya: struktur pencarian bawaan Wuzz sudah terikat rapi dengan sistem Blogger menggunakan atribut khusus seperti expr:action='data:blog.searchUrl' dan nama‑nama elemen yang sudah ditentukan. Menggantinya sembarangan bisa merusak tata letak, membuat tombol pencarian berhenti berfungsi, atau bahkan memunculkan pesan kesalahan XML seperti SAXParseException — Attribute name must be followed by the '=' character yang membuat saya bingung berjam‑jam mencari tahu di mana letak salah ketiknya. Belum lagi jika kita salah memilih tata letak di panel pengaturan Google CSE — antara “Overlay / Tumpang Tindih” yang menutupi seluruh halaman sehingga jelek sekali dilihat, “Dua Halaman” yang berpindah ke alamat baru, atau “Di Halaman Sama” yang susah sekali disesuaikan.

Langkah‑langkah Benar Membuat & Menyesuaikan Google CSE untuk Template Wuzz

Langkah 1 — Membuat Mesin Pencarian di Google

Pertama‑tama kita harus punya mesin pencarian sendiri. Buka halaman Google Custom Search Engine di alamat cse.google.com, lalu masuk menggunakan akun Google yang sama dengan blog kamu. Klik tombol “Tambah Mesin Pencarian Baru”, lalu di kolom “Situs yang akan dicari” tuliskan alamat lengkap blog kamu misalnya lintasiana.com/* — tanda bintang di belakang berarti mencari di seluruh halaman di dalamnya. Beri nama yang mudah diingat, lalu tekan Buat. Nanti kamu akan mendapatkan kode unik berupa nomor dan huruf panjang yang disebut ID Mesin Pencarian — contohnya milik saya adalah 6181f432053554348 — simpan baik‑baik karena ini kunci utama semuanya.

Di bagian pengaturan tampilan, inilah yang paling sering salah saya pilih sebelumnya: jangan pilih “Tumpang Tindih / Overlay” — ini yang membuat kotak hasil menutupi seluruh layar seperti yang kamu keluhkan tadi! Pilih tata letak yang paling pas — lalu di bagian “Halaman hasil pencarian” pilih opsi yang memungkinkan kita menampilkannya sendiri, dan gaya tampilannya pilih “Hasil pencarian saja” agar tidak memuat elemen tambahan yang tidak kita butuhkan. Jangan lupa menyimpan setiap perubahan — banyak kali saya lupa menekan tombol simpan lalu bingung kenapa tidak ada yang berubah apa‑apa!

Langkah 2 — Memahami Mengapa Skrip Biasa Menurunkan Skor Kecepatan

Di sinilah letak kesalahan terbesar saya di awal: saya menempelkan kode lengkap Google CSE beserta skrip cse.js tepat di bagian atas halaman, sehingga setiap pengunjung yang datang — bahkan yang tidak berniat mencari apa‑apa pun — tetap memuat berpuluh‑puluh kilobyte kode tambahan dari Google, menambah waktu muat halaman, dan akhirnya menurunkan skor performa dari sempurna menjadi jauh di bawah standar. Belajar dari kesalahan ini, solusinya sangat cerdas: tunda pemuatan skrip Google CSE sampai benar‑benar dibutuhkan saja — yaitu saat pengunjung benar‑benar mengetik kata kunci dan menekan tombol cari! Teknik ini disebut lazy loading atau pemuatan lambat, dan inilah kunci agar skor kecepatan kembali bagus.

Langkah 3 — Kode Lengkap Siap Pasang, Sesuai Template Wuzz, Tanpa Turunkan Performa

Setelah mencoba berkali‑kali, menghapus kode yang tidak kompatibel, memperbaiki atribut yang melanggar aturan XML Blogger, dan menerapkan teknik pemuatan lambat — akhirnya saya menemukan kombinasi yang sempurna: tetap menggunakan kotak pencarian asli milik Wuzz tanpa mengubah tampilan sedikit pun, saat ditekan tombolnya muncul kotak hasil yang rapi, muat skrip Google hanya saat diperlukan saja, dan skor performa kembali pulih! Berikut kode lengkapnya yang sudah saya uji coba berulang kali — cukup salin dan tempel menggantikan bagian pencarian lama atau menambahkan setelahnya sesuai petunjuk: pasang kode ini sesudaj kode <body> atau sebelum kode </body>

<!-- =========================================
     GOOGLE CSE POPUP - LAZY LOAD
     CSE ID: 6181f432053554348
========================================= -->

<div id='cse-search-popup'>

  <div id='cse-search-overlay'></div>

  <div id='cse-search-box'>

    <button
      id='cse-search-close'
      type='button'
      aria-label='Tutup'>
      &#215;
    </button>

    <div id='cse-search-title'>
      Hasil Pencarian
    </div>

    <div id='cse-search-content'>

      <div id='cse-popup-results'></div>

    </div>

  </div>

</div>

<style type='text/css'>
/* <![CDATA[ */

#cse-search-popup {
  display: none;
  position: fixed;
  z-index: 9999999;
  inset: 0;
}

#cse-search-popup.cse-active {
  display: block;
}

#cse-search-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

#cse-search-box {
  position: absolute;
  top: 4%;
  left: 50%;
  width: 92%;
  max-width: 900px;
  height: 92%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 15px 50px rgba(0,0,0,.35);
}

#cse-search-title {
  display: flex;
  align-items: center;
  height: 58px;
  padding: 0 70px 0 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  color: #222;
  font-size: 18px;
  font-weight: 600;
}

#cse-search-close {
  position: absolute;
  z-index: 20;
  top: 10px;
  right: 15px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f1f1f1;
  color: #333;
  font-size: 28px;
  line-height: 38px;
  text-align: center;
  cursor: pointer;
}

#cse-search-close:hover {
  background: #e5e5e5;
}

#cse-search-content {
  position: absolute;
  top: 58px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  padding: 15px 20px 30px;
  box-sizing: border-box;
  background: #fff;
}

#cse-popup-results {
  width: 100%;
}

#cse-popup-results .gsc-control-cse {
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#cse-popup-results .gsc-result {
  padding: 10px 0 !important;
}

@media screen and (max-width:600px) {

  #cse-search-box {
    top: 2%;
    width: 96%;
    height: 96%;
    border-radius: 14px;
  }

  #cse-search-title {
    height: 54px;
    padding-left: 16px;
    font-size: 17px;
  }

  #cse-search-content {
    top: 54px;
    padding: 10px 12px 25px;
  }

  #cse-search-close {
    top: 9px;
    right: 10px;
  }

}

/* ]]> */
</style>


<script type='text/javascript'>
//<![CDATA[

(function () {

  'use strict';

  var cseLoaded = false;
  var cseLoading = false;
  var pendingQuery = '';

  var popup =
    document.getElementById('cse-search-popup');

  var closeButton =
    document.getElementById('cse-search-close');

  var overlay =
    document.getElementById('cse-search-overlay');

  var form =
    document.getElementById('search-mobile');

  var input =
    document.getElementById('search-input-mobile');


  if (!popup || !form || !input) {
    return;
  }


  /* =========================================
     LOAD GOOGLE CSE HANYA SAAT DIBUTUHKAN
  ========================================= */

  function loadGoogleCSE(query) {

    pendingQuery = query;


    /* Kalau sudah pernah dimuat */

    if (cseLoaded) {

      executeSearch();

      return;

    }


    /* Kalau sedang dimuat */

    if (cseLoading) {
      return;
    }


    cseLoading = true;


    /*
     * Google CSE explicit mode
     */

    window.__gcse = {

      parsetags: 'explicit',

      initializationCallback: function () {

        try {

          window.google.search.cse.element.render({

            div: 'cse-popup-results',

            tag: 'searchresults-only',

            gname: 'popupSearch'

          });

          cseLoaded = true;
          cseLoading = false;


          executeSearch();

        } catch (error) {

          cseLoading = false;

          console.log(
            'Google CSE error:',
            error
          );

        }

      }

    };


    /*
     * Script Google CSE baru dibuat
     * setelah user melakukan pencarian.
     */

    var script =
      document.createElement('script');

    script.async = true;

    script.src =
      'https://cse.google.com/cse.js?cx=6181f432053554348';


    document.head.appendChild(script);

  }


  /* =========================================
     JALANKAN PENCARIAN
  ========================================= */

  function executeSearch() {

    if (!pendingQuery) {
      return;
    }


    try {

      var searchElement =
        window.google.search.cse.element.getElement(
          'popupSearch'
        );


      if (searchElement) {

        searchElement.execute(
          pendingQuery
        );

      }

    } catch (error) {

      console.log(
        'CSE execute error:',
        error
      );

    }

  }


  /* =========================================
     BUKA POPUP
  ========================================= */

  function openPopup(query) {

    query = query.trim();


    if (!query) {

      input.focus();

      return;

    }


    popup.classList.add('cse-active');

    document.documentElement.style.overflow =
      'hidden';

    document.body.style.overflow =
      'hidden';


    loadGoogleCSE(query);

  }


  /* =========================================
     TUTUP POPUP
  ========================================= */

  function closePopup() {

    popup.classList.remove('cse-active');

    document.documentElement.style.overflow =
      '';

    document.body.style.overflow =
      '';

  }


  /* =========================================
     FORM BLOGGER
  ========================================= */

  form.addEventListener(
    'submit',
    function (event) {

      event.preventDefault();

      event.stopPropagation();

      openPopup(input.value);

      return false;

    },
    true
  );


  /* =========================================
     CLOSE
  ========================================= */

  closeButton.addEventListener(
    'click',
    function () {

      closePopup();

    }
  );


  overlay.addEventListener(
    'click',
    function () {

      closePopup();

    }
  );


  /* =========================================
     ESC
  ========================================= */

  document.addEventListener(
    'keydown',
    function (event) {

      if (event.key === 'Escape') {

        if (
          popup.classList.contains(
            'cse-active'
          )
        ) {

          closePopup();

        }

      }

    }
  );


})();

//]]>
</script>

Kelebihan cara ini dibandingkan cara biasa:

• Skrip Google hanya dimuat saat tombol cari ditekan — halaman awal tetap ringan & cepat, skor kecepatan kembali sempurna!
• Tampilan kotak hasil rapi, berada di tengah layar, tidak menutupi seluruh halaman secara jelek, mudah ditutup tombol silang atau tekan tombol Esc di keyboard
• Kompatibel sempurna dengan struktur pencarian bawaan template Wuzz — cukup pasang, tidak perlu ubah form asli berulang kali
• Semua kode sudah diperbaiki formatnya — aman dari kesalahan XML seperti SAXParseException yang sering muncul di Blogger
• Menggunakan ID mesin pencarian kamu sendiri — ganti saja bagian cx=... dengan milikmu jika berbeda

Langkah Pasang & Hal‑hal Penting yang Harus Diingat

Cara memasangnya cukup mudah — buka menu Tema → Edit HTML di Blogger, cari bagian tempat kode pencarian berada (biasanya ada tulisan search‑box‑mobile atau search‑box‑container), lalu tempelkan kode di atas setelah elemen tersebut atau ikuti petunjuk menempatkannya di bagian yang tepat. Jangan lupa menekan tombol Simpan — dan pastikan tidak ada pesan kesalahan merah yang muncul. Kalau sebelumnya kamu sudah mencoba kode‑kode percobaan lain, hapus semuanya dulu sampai bersih agar tidak terjadi bentrok fungsi yang membuat tombol cari diam saja saat ditekan.

⚠️ Hal penting yang sering terlewat:

• Di halaman pengaturan Google CSE, pastikan memilih tata letak yang sesuai — jangan pilih “Overlay” yang membuat tampilan jelek, dan aturlah agar hasilnya tetap di dalam situsmu sendiri
• Ganti nilai cx=6181f432053554348 dengan ID mesin pencarian milikmu sendiri jika berbeda — ini nomor unik milik setiap orang
• Karena kode ini menargetkan elemen dengan nama search‑mobile dan search‑input‑mobile yang merupakan nama bawaan template Wuzz, pastikan tidak mengubah nama‑nama elemen tersebut agar fungsi penangkapan pencarian tetap berjalan lancar
• Jika kamu juga punya kotak pencarian versi komputer (bukan hanya tampilan ponsel), tinggal tambahkan kode yang serupa dengan penyesuaian nama elemennya

Kesimpulan — Dari Gagal Berkali‑kali Menjadi Solusi Sempurna

Perjalanan panjang mencari cara yang tepat untuk membuat widget Google penelusuran custom di Blogger ini sungguh memberikan pelajaran berharga bagi saya — dan sekarang saya bagikan semuanya kepadamu agar tidak perlu mengalami kesulitan yang sama. Mulai dari salah paham cara kerja sistem pencarian bawaan, salah memilih pengaturan tampilan di Google CSE, menaruh skrip di tempat yang salah sehingga menurunkan performa situs dari 99 jatuh ke 73, memperbaiki atribut yang tidak sesuai aturan XML, hingga akhirnya menemukan teknik pemuatan lambat yang membuat semuanya berjalan lancar tanpa mengorbankan kecepatan.

Hasil akhirnya? Sekarang pengunjung Lintasiana.com bisa mengetik apa saja yang mereka cari, menekan tombol cari, dan seketika muncul kotak hasil yang rapi berisi halaman‑halaman dari situs saya saja, diurutkan paling relevan menurut Google, semuanya tetap di dalam situs tanpa berpindah ke halaman lain, dan yang paling penting — skor kecepatan halaman kembali pulih sempurna! Ternyata kuncinya sederhana sekali: pahami dulu struktur templatemu, gunakan cara yang benar sesuai aturan Google, muat kode tambahan hanya saat benar‑benar dibutuhkan, dan jangan menyerah meskipun sudah gagal berkali‑kali — karena pada akhirnya solusi yang tepat pasti akan kita temukan juga.

Semoga pengalaman saya yang penuh liku‑liku ini bermanfaat untukmu yang sedang berjuang memasang Google Penelusuran Custom Engine (CSE) di blog milikmu sendiri — terutama jika menggunakan template Wuzz yang indah ini. Kalau ada bagian yang kurang jelas atau menemui kendala lain, jangan ragu bertanya — saya sudah melewati hampir semua kemungkinan masalahnya dan siap membantu sebisanya. Selamat mencoba, semoga berhasil, dan semoga pencarian di blogmu makin memudahkan pengunjung menemukan apa yang mereka cari! 🚀