Cara Modifikasi Tampilan Pencarian Template Wuzz

Table of Contents

Siapa yang tidak kenal dengan Template Wuzz? Salah satu tema Blogger terbaik saat ini yang terkenal ringan, bersih kodenya, kecepatannya luar biasa, dan tampilannya sangat modern serta nyaman dibaca. Sudah lama saya menggunakannya untuk situs Lintasiana.com, dan sejauh ini hampir semua bagian sudah pas persis seperti yang saya harapkan — sampai satu hal yang membuat saya ingin mempercantiknya lagi: sistem pencarian bawaan yang sederhana, ingin saya ganti menjadi tampilan pencarian Google CSE yang lebih elegan, lengkap, dan tetap serasi dengan desain aslinya.

Kalau kamu juga sedang mencari cara mengatur widget pencarian di Template Wuzz, memasang Google Custom Search Engine di Blogger, membuat kotak pencarian yang hasilnya muncul rapi tanpa merusak tampilan, atau merubah tampilan search Template Wuzz biar lebih modern & profesional — cerita lengkap pengalaman saya ini persis untukmu! Saya akan berbagi langkah‑demi‑langkah lengkap, mulai dari mencadangkan tema, mendaftar mesin telusur, sampai menempelkan kode yang sudah diperbaiki agar aman dipakai di Blogger tanpa pesan kesalahan.

✅ Untuk melihat demonya, anda bisa mencobanya langsung di website LINTASIANA.COM

Cadangkan Dulu Template Wuzz Milik Anda!

Sebelum melakukan modifikasi pada tampilan widget pencarian di Template Wuzz, alangkah baiknya anda mencadangkan template Wuzz milik anda terlebih dahulu. Ini langkah yang sering kali terlihat sepele, tapi percayalah — sangat penting untuk menghindari kesalahan atau kerusakan saat mengedit kode. Mengapa saya bilang begitu? Karena melakukan perubahan pada struktur kode mungkin akan mengalami sedikit kegagalan jika baru pertama kali mencoba, seperti yang pernah saya alami sendiri — salah taruh kode, lupa menutup elemen, atau atribut yang tidak sesuai aturan XML Blogger membuat tampilan berantakan seketika! Dengan mencadangkan, kita bisa tenang bereksperimen; kalau salah tinggal pulihkan kembali seperti semula.

📝 Cara mencadangkan Template Wuzz:

1. Masuk ke menu Blogger → pilih Tema
2. Di sebelah kanan atas, cari tombol panah kecil 🔻 di samping tulisan “Sesuaikan”
3. Kemudian klik “Cadangkan / Unduh Tema” — berkas akan terunduh ke komputer atau HP kamu
4. Simpan di tempat yang mudah dicari — berkas ini adalah cadangan lengkap seluruh tampilan blogmu!

Mendaftar ke Custom Search Engine (CSE) Google

Langkah pertama untuk melakukan modifikasi pada tampilan pencarian Template Wuzz anda harus mendaftar terlebih dahulu ke Custom Search Engine Google — inilah layanan resmi yang memungkinkan kita membuat kotak pencarian milik sendiri, ditenagai mesin telusur andalan Google, bisa diatur mencari hanya di situs kita saja, dan tampilannya bisa disesuaikan sesuka hati.

Mengapa Harus Menggunakan Google Custom Search Engine (CSE)?

Sebelum kita mulai proses pendaftaran, mari kita pahami dulu mengapa saya sangat menyarankan beralih ke sistem ini daripada tetap menggunakan pencarian bawaan Blogger saja — karena manfaatnya sungguh luar biasa banyaknya bagi blog kita:

A. Tampilan lebih responsif dan elegan — Pencarian bawaan Blogger memang sederhana, tapi tampilannya sangat standar dan kurang bisa diubah. Dengan Google CSE kita bisa membuat kotak hasil pencarian yang indah, muncul rapi di tengah layar, lengkap dengan judul, tautan, dan ringkasan artikel, warnanya bisa disesuaikan persis dengan warna tema blog kita, sehingga pengunjung betah dan merasa nyaman saat mencari sesuatu.

B. Hasil pencarian relevan & jadi sumber trafik organik — Hasil pencarian dari pengguna langsung diambil dari artikel anda yang sudah terindeks Google! Artinya urutannya paling tepat, paling relevan, dan Google tahu persis mana halaman milikmu. Bahkan saat orang lain mencari topik yang sama lewat Google biasa, artikel yang sering dikunjungi lewat pencarian di dalammu juga bisa makin naik peringkatnya — sungguh keuntungan ganda yang luar biasa!

C. Sepenuhnya gratis & mudah disesuaikan — Kamu tidak perlu membayar sepeser pun untuk pemakaian biasa, bisa membuat banyak mesin pencarian untuk berbagai keperluan, dan semua pengaturannya sangat mudah dipahami bahkan bagi pemula sekalipun.

Cara Mendaftarkan Blog ke Custom Search Engine — Langkah‑demi‑Langkah

Berikut adalah panduan lengkap cara membuat akun & mesin telusur milikmu sendiri, persis seperti yang saya lakukan:

1. Kunjungi halaman resmi Google CSE — Anda bisa mengunjungi custom search engine milik Google atau klik tautan berikut ini untuk masuk otomatis: 👉 https://cse.google.com/cse/. Pastikan kamu masuk menggunakan akun Google yang sama dengan blogmu agar semuanya terhubung dengan mudah.
2. Klik “Tambah Mesin Pencarian Baru” / “Mendaftar” — Tampilan bisa sedikit berbeda tergantung perangkat yang kamu pakai (HP atau komputer), jadi jangan bingung kalau tulisannya tidak persis sama, yang penting cari tombol untuk membuat yang baru.
   
   
   
3. Isi nama & alamat situsmu — Buat judul atau nama mesin telusur anda, misalnya “Pencarian Lintasiana”, lalu masukkan situs atau URL domain situs anda — contohnya lintasiana.com/* (tanda bintang di belakang berarti mencari di SEMUA halaman di dalamnya!). Jangan lupa pilih “Cari hanya di situs ini” kalau kamu ingin hasilnya murni dari blogmu saja.

   

   
   
4. Atur tampilan & simpan — Scroll ke bawah lalu atur pengaturan mesin telusur CSE anda: pilih gaya tampilan yang cocok, atur lebar kotak, dan lain‑lain. Kalau belum yakin pakai apa, biarkan dulu yang bawaan nanti kita sesuaikan lewat kode saja. Setelah siap tekan tombol “Buat” — selesai, mesin pencarianmu sudah jadi!

   

   
   
5. Salin ID & kode mesin pencarianmu — Kemudian kamu akan melihat halaman ringkasan. Di sana ada kode unik panjang berupa angka dan huruf — ini yang disebut ID Mesin Pencarian (contoh milik saya: 6181f432053554348). Simpan baik‑baik nomor ini, lalu kamu bisa tekan tombol “Sesuaikan” kalau mau mengubah tampilan lebih lanjut.

   

   
   
   
   

✅ Catatan penting: Nanti saat memasang kode di blog, kamu hanya perlu mengganti bagian cx=6181f432053554348 dengan nomor ID milikmu sendiri — tidak perlu menyalin seluruh kode yang rumit dari halaman Google!

Memodifikasi Tampilan Widget Pencarian Template Wuzz Blogger

Jika anda sudah melakukan pendaftaran dan penyesuaian di Google Custom Search Engine, langkah selanjutnya mari kita modifikasi tampilan widget pencarian milik Template Wuzz yang anda gunakan. Bagian ini yang paling saya kerjakan dengan teliti — mencoba berbagai cara, memperbaiki atribut yang membuat Blogger error, menyesuaikan gaya agar pas dengan tema, dan memastikan kode tidak memperlambat kecepatan halaman yang sudah terkenal cepat ini.

Langkah demi Langkah Memasang Kode di Template Wuzz

1. Buka menu Edit HTML — Buka Blogger anda → pilih menu Tema → klik tombol panah kecil 🔻 tadi → pilih “Edit HTML”. Halaman akan berubah menampilkan barisan kode lengkap seluruh tampilan blogmu — jangan takut, kita hanya akan menambahkan bagian baru saja, tidak mengubah yang sudah ada!

   

   
   
2. Cari tempat yang tepat — Kemudian scroll ke bawah temukan kode penutup kepala: </header>. Di Template Wuzz biasanya letaknya cukup jelas, kurang lebih di sekitar baris 2.200–2.250 tergantung versi temanya kalau di template wuzz saya berada di baris 2.226. Kalau susah menemukannya, tekan tombol pencarian di halaman (Ctrl + F atau cari di menu HP) lalu ketik </header> — akan langsung melompat ke tempatnya!
3. Tempelkan kode lengkap — Salin dan tempelkan kode lengkap yang saya siapkan di bawah ini tepat di bawah kode </header>. Ini tempat paling pas karena akan dimuat setelah bagian kepala dan sebelum konten utama, sehingga tampilannya benar‑benar terintegrasi dengan baik tanpa mengganggu bagian lain.

   

   
   

Kode Lengkap Siap Pasang — Aman, Elegan & Cepat!

Berikut adalah kode lengkap yang sudah saya uji coba berulang kali, diperbaiki agar aman dari kesalahan XML Blogger, tampilan modern & elegan, hasil muncul di kotak rapi di tengah layar, dan yang paling penting — memuat skrip Google hanya saat dibutuhkan saja sehingga skor kecepatan templatemu tetap bagus!

<!-- =========================================
     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;
  }

  function loadGoogleCSE(query) {
    pendingQuery = query;

    if (cseLoaded) {
      executeSearch();
      return;
    }

    if (cseLoading) {
      return;
    }

    cseLoading = true;

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

    var script = document.createElement('script');
    script.async = true;
    script.src = 'https://cse.google.com/cse.js?cx=6181f432053554348';
    document.head.appendChild(script);
  }

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

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

  function closePopup() {
    popup.classList.remove('cse-active');
    document.documentElement.style.overflow = '';
    document.body.style.overflow = '';
  }

  form.addEventListener('submit', function (event) {
    event.preventDefault();
    event.stopPropagation();
    openPopup(input.value);
    return false;
  }, true);

  closeButton.addEventListener('click', function () { closePopup(); });
  overlay.addEventListener('click', function () { closePopup(); });

  document.addEventListener('keydown', function (event) {
    if (event.key === 'Escape') {
      if (popup.classList.contains('cse-active')) { closePopup(); }
    }
  });

})();

//]]>
</script>

⚠️ Ganti dengan milikmu sendiri! Cari kode https://cse.google.com/cse.js?cx=6181f432053554348 pada kode di atas, kemudian ubah dengan kode Custom Search Engine milik anda. Anda hanya perlu memasukkan kode CSE anda bagian itu saja untuk mengganti kode yang saya tandai — bukan semua kode CSE anda yang dipasangkan!

Keunggulan Cara Ini Dibandingkan Cara Biasa

Setelah mencoba berkali‑kali, memperbaiki kesalahan, dan menyempurnakan kode ini — inilah mengapa saya sangat menyarankan kamu menggunakan cara ini juga untuk Template Wuzz milikmu:

• Tampilan elegan & modern serasi tema — Kotak hasil pencarian muncul rapi di tengah layar, lengkap dengan bayangan lembut, sudut membulat, latar belakang gelap sedikit buram di belakang agar fokus ke hasil pencarian, tombol tutup yang mudah dilihat & ditekan — semuanya terlihat seperti bagian asli dari templatemu, bukan tambahan yang terlihat asing.
• Tetap ringan & cepat — pakai teknik pemuatan lambat! — Inilah bagian yang paling saya bangga siapkan: skrip Google CSE baru dimuat saat pengunjung benar‑benar menekan tombol cari, bukan sejak halaman baru terbuka! Hasilnya skor kecepatan templatemu yang dulu 99/100 tetap terjaga baik, tidak turun drastis seperti yang pernah saya alami di awal percobaan.
• Tidak merusak pencarian bawaan — Kita tidak mengubah atau menghapus kode pencarian asli Template Wuzz, jadi kalau ada bagian yang belum berfungsi sempurna atau ingin kembali ke awal, tinggal hapus kode yang kita tambahkan ini — semuanya kembali seperti semula!
• Aman dari kesalahan Blogger XML — Semua atribut sudah diperbaiki formatnya, tidak ada atribut yang tertulis sendirian tanpa nilai, semua elemen ditutup dengan benar, dan kode JavaScript dilindungi di dalam bagian //<![CDATA[ … //]]> — sehingga Blogger tidak akan mengeluh pesan kesalahan seperti “SAXParseException” yang sering muncul saat mengedit tema.
• Mudah digunakan pengunjung — Bisa ditutup pakai tombol silang, klik latar belakang gelap, atau tekan tombol Esc di keyboard — sangat intuitif dan nyaman digunakan siapa saja!

Kesimpulan — Dari Widget Pencarian Sederhana Menjadi Fitur Mewah

Melalui perjalanan mencari cara yang tepat untuk merubah tampilan search Template Wuzz ini, saya belajar banyak hal — mulai dari mencadangkan tema agar aman, mendaftar & membuat mesin pencarian sendiri di Google Custom Search Engine, menyesuaikan kode agar pas dengan struktur tema, memperbaiki atribut yang tidak sesuai aturan Blogger, sampai menemukan teknik pemuatan lambat agar templatemu tetap cepat & ringan seperti aslinya.

Sekarang pengunjung blogmu bisa mengetik apa saja yang mereka cari di kotak pencarian yang sudah terbiasa mereka lihat, menekan tombol cari, dan seketika muncul kotak hasil yang indah, rapi, berisi artikel‑artikel dari situsmu saja yang paling relevan — semuanya tetap di dalam situsmu tanpa berpindah ke halaman lain, dan yang paling penting — tidak mengorbankan kecepatan & kebersihan kode Template Wuzz yang kamu sukai sejak awal!

Semoga panduan lengkap pengalaman saya ini bermanfaat untukmu yang sedang mempercantik & memperkuat fitur pencarian di blogmu sendiri. Kalau ada bagian yang kurang jelas atau menemui kendala saat memasangnya, jangan ragu bertanya — saya sudah melewati hampir semua kemungkinan masalahnya dan siap membantu sebisanya. Selamat mencoba, semoga berhasil, dan semoga pengunjung makin betah berlama‑lama di blogmu karena kemudahan mencari apa yang mereka butuhkan! 🚀✨