Form Pencarian Blogger Input Dari Hasil Google Tanpa CSE

Salah satu fitur penting dalam sebuah blog adalah kolom pencarian. Fitur ini membantu pengunjung menemukan konten yang mereka butuhkan dengan cepat tanpa harus menelusuri halaman demi halaman. Namun, tak sedikit blogger yang mengalami penurunan performa blog setelah menambahkan Google Custom Search Engine (CSE) secara langsung ke dalam template mereka.

Google CSE memang memberikan hasil pencarian yang akurat karena terintegrasi langsung dengan mesin pencari Google. Tetapi, script bawaannya cenderung berat dan dapat menurunkan skor performa blog di PageSpeed Insights, terutama karena memuat resource eksternal, seperti file JavaScript, CSS, dan iframe.

Jika Anda menginginkan performa blog tetap optimal, tetapi tetap ingin memanfaatkan kekuatan Google untuk pencarian internal blog, maka artikel ini akan memandu Anda untuk membuat form pencarian yang ringan dan tetap efektif — tanpa menurunkan skor kecepatan blog Anda.

Cara Membuat Custom Search Blogger Tanpa CSE

Biasanya para blogger akan membuat widget pencarian pas blog mereka menggunakan custom search engine. Ini bertujuan untuk meningkatkan jumlah klik blog mereka.

Namun memasang CSE ke blogger dapat menurunkan performa template blogger. Hal ini seperti yang saya alami.

Awalnya saya MENGHUBUNGKUN CUSTOM SEARCH ENGGINE KE BLOGGER, namun performa blogger saya menurun.

Hasilnya saya harus mencari solusi lain agar jumlah klik blog saya tetap meningkat, dari fitur pencarian di blogger saya yang otomatis ngambil dari data index di google mirip CSE.

Seya menemukan solusi pengganti cse untuk fitur pencarian blogger saya.

Ilustrasi kerjanya :

1. Ketika pengunjung mengetik suatu kata pada pencarian blog radio Konoha.

2. Saat pengunjung menekan cari kata yang sudah di ketik, maka otomatis hasil input di alihkan ke halaman google search engine seperti di gambar ini.

Mengapa Script CSE Bawaan Harus Dihindari

Kode CSE standar seperti di bawah ini memang mudah dipasang:

<script async src="https://cse.google.com/cse.js?cx=..."></script>
<div class="gcse-search"></div>

Namun, di balik kemudahannya, script ini dapat menyebabkan:

Penurunan skor performa blog secara signifikan
Peningkatan waktu muat halaman
Peringatan dari alat audit SEO seperti Lighthouse dan PageSpeed Insights
Potensi gangguan pada pengindeksan halaman jika halaman menjadi lambat

Hal ini terjadi karena script CSE melakukan pemanggilan ke server eksternal, memuat lebih dari satu file JavaScript besar, dan melakukan rendering elemen pencarian yang berat.

Membuat Form Pencarian Manual Berbasis Google

Alih-alih menggunakan script bawaan Google, kita dapat membuat form pencarian HTML biasa yang tetap mengarahkan hasil pencarian ke Google, namun dibatasi hanya pada blog Anda. Hasilnya adalah pencarian cepat tanpa harus memuat script berat.

Berikut kode HTML-nya:

<form action="https://www.google.com/search" method="get" target="_blank">
  <input type="text" name="q" placeholder="Cari di blog ini..." />
  <input type="hidden" name="sitesearch" value="namabloganda.blogspot.com" />
  <button type="submit">Cari</button>
</form>

Penjelasan kode:

action="https://www.google.com/search": Mengarahkan pencarian ke Google.
name="q": Parameter query untuk pencarian.
sitesearch: Membatasi hasil pencarian hanya dari blog Anda.
target="_blank": Membuka hasil di tab baru.

Gantilah namabloganda.blogspot.com dengan URL blog Anda yang sebenarnya, seperti www.blogsaya.com.

Cara Memasang Fitur Pencarian Berbasis Google Di Blogger

Masuk ke dashboard Blogger Anda.
Pilih menu Tata Letak.
Klik pada bagian Tambahkan Gadget di area yang Anda inginkan (misalnya sidebar).
Pilih gadget HTML/JavaScript.
Tempelkan kode HTML form pencarian ke dalam kolom konten.
Klik Simpan, lalu lihat blog Anda.

Dengan cara ini, Anda menambahkan fitur pencarian tanpa mengganggu performa keseluruhan blog.

Menambahkan Desain yang Lebih Rapi dan Responsif

Agar tampil lebih menarik dan serasi dengan tema blog, Anda dapat menambahkan sedikit CSS sebagai berikut:

<style>
form.search-box {
  display: flex;
  gap: 8px;
  max-width: 100%;
}
form.search-box input[type="text"] {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
form.search-box button {
  padding: 8px 16px;
  background-color: #4285f4;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
form.search-box button:hover {
  background-color: #3367d6;
}
</style>

<form action="https://www.google.com/search" method="get" target="_blank" class="search-box">
  <input type="text" name="q" placeholder="Cari artikel di sini..." />
  <input type="hidden" name="sitesearch" value="www.blogsaya.com" />
  <button type="submit">Cari</button>
</form>

Dengan tambahan styling ini, form pencarian akan terlihat modern dan mudah digunakan, sekaligus tetap ringan dan cepat dimuat.

Cara Memasang Fitur Pencarian Berbasis Google Di Template Median UI / Plus UI

Jika kamu menggunakan template median UI atau plus UI seperti saya, anda bisa mengikuti langkah-langkah berikut untuk membuat fitur pencarian berbasis google di blogger anda.

1. Masuk ke edit html blogger kamu sekarang juga.

2. Klik titik tiga, lompat ke widget, pilih blogsearch1.

3. Cari kode seperti ini :

<form class='srchF' expr:action='data:blog.searchUrl'>
  <input type='text' name='q' placeholder='Cari di blog ini...' />
  <button type='submit'>Cari</button>
</form>

Lalu ganti dengan kode seperti ini :

<form action='https://www.google.com/search' method='get' target='_blank'>
  <input name='sitesearch' type='hidden' value='radiokonoha.com'/>
</form>

Kemudian klik simpan dan coba, pada tulisan radiokonoha.com ubah dengan subdomain blogger kamu.

Manfaat SEO dari Form Pencarian Manual

Menggunakan form pencarian berbasis Google dengan pendekatan ringan ini memberikan beberapa keuntungan penting dari sisi SEO teknis:

Waktu muat halaman tetap cepat, mendukung skor Core Web Vitals.
Tidak ada render-blocking script, sehingga tidak menurunkan performa halaman.
Pengalaman pengguna yang optimal, yang berkontribusi pada peningkatan durasi kunjungan dan penurunan bounce rate.
Penggunaan resource server lebih hemat, karena tidak ada script tambahan dari pihak ketiga.

Dengan kata lain, Anda tetap memberikan fitur pencarian yang bermanfaat bagi pengunjung, tanpa mengorbankan kualitas teknis blog Anda di mata mesin pencari.

Keterbatasan Fitur Pencarian Manual Berbasis Google Ketimbang CSE

Meskipun efisien, form pencarian manual ini tidak menampilkan hasil pencarian secara langsung di dalam halaman blog Anda seperti versi penuh Google CSE. Hasil akan dibuka di halaman Google Search dengan filter situs Anda.

Namun, untuk sebagian besar blog pribadi, blog berita, dan blog tutorial, pendekatan ini sudah sangat memadai, terutama jika tujuan utama Anda adalah menjaga performa dan kecepatan halaman tetap maksimal.

Menambahkan fitur pencarian ke blog tidak harus mengorbankan kecepatan situs. Dengan form pencarian ringan berbasis Google yang ditanamkan secara manual, Anda tetap dapat memberikan pengalaman terbaik bagi pembaca tanpa harus memuat script berat dari Google Custom Search Engine.

Solusi ini sangat direkomendasikan bagi pengguna Blogger yang ingin mempertahankan skor performa tinggi, meningkatkan SEO teknis, dan menjaga kenyamanan pengguna. Selalu ingat bahwa blog yang cepat tidak hanya disukai pengunjung, tapi juga lebih mudah bersaing di hasil pencarian Google.

Jika Anda membutuhkan bantuan dalam menyesuaikan desain pencarian ini agar sesuai dengan tema blog Anda, saya siap membantu lebih lanjut.

Rate This Article

Thanks for reading: Form Pencarian Blogger Input Dari Hasil Google Tanpa CSE, Sorry, my English is bad:)

RaKon Template