Kolom Pencarian Kustom dengan HTML dan CSS di Oxygen Builder

Untuk membuat kolom pencarian kustom di Oxygen Builder menggunakan HTML yang bisa dikustomisasi dengan mudah menggunakan Custom CSS, silakan ikuti langkah-langkah berikut:

Langkah pertama: Salin kode HTML

Silakan copy kode html berikut:

<form class="my-searchform" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <input type="text" name="s" placeholder="Cari..." value="<?php echo get_search_query(); ?>" required>
    <button type="submit">Search</button>
</form>

Silakan ganti placeholder sesuai selera Anda, Anda juga bisa menghapus required jika Anda ingin mengizinkan pencarian tanpa perlu memasukkan kata kunci.

Langkah kedua: Tambahkan kode HTML

Edit template Oxygen Builder yang ingin Anda tambahkan kolom pencarian, tambahkan codeblock, pilih PHP & HTML, lalu tambahkan kode di atas.

Langkah ketiga: Salin kode CSS

Langkah selanjutnya adalah menambahkan custom CSS, berikut contoh kode custom CSS yang saya gunakan:

/*SEARCHFORM CUSTOM CSS WWW.ZAAD.MY.ID*/
.my-searchform {
  color: #555;
  display: block;
  padding: 2px;
  border: 1px solid #efefef;
  border-radius: 0px;
    }
  
.my-searchform  input[type="text"] {
  border: none;
  background: transparent;
  margin: 0;
	padding-top: 7px;
	padding-bottom: 8px;
	width: 80%;
  font-size: 14px;
  color: inherit;
  border: 1px solid transparent;
  border-radius: 0px;
}

.my-searchform input[type="text"]::placeholder {
  color: #bbb;
}
  button[type="submit"] {
  text-indent: -999px;
  overflow: hidden;
  width: 10%;
	margin-left: 10px;
  border: 1px solid transparent;
  border-radius: inherit;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  cursor: pointer;
  opacity: 0.7;
}
button[type="submit"]:focus,
.my-searchform input[type="text"]:focus {
 /* box-shadow: 0 0 3px 0 #009999;
  border-color: #009999;*/
  background-color: #f2f2f2;
  outline: none;
}

button[type="submit"]:hover {
  opacity: 1;
}

Kode CSS di atas akan mengubah warna background, border, lebar, padding serta akan membuat icon search berada di dalam form dan lain-lain, silakan modifikasi kode tersebut sesuai selera Anda.

Langkah keempat: Tambahkan kode CSS

Selanjutnya tambahkan kode CSS di atas, Anda dapat menambahkan kode CSS di atas menggunakan salah satu cara berikut:

Cara pertama:

Tambahkan kode CSS dari Codeblock langsung, dari menu Primary, pilih CSS, lalu tambahkan kode CSS di atas.

Cara kedua:

Menambahkan kustom CSS di Oxygen Builder: Anda dapat menambahkan kode CSS di atas pada menu Custom CSS atau Custom Stylesheets di Oxygen Builder, yang harus Anda lakukan hanyalah mengedit template yang ada, saat editor sudah terbuka sempurna silakan tambahkan kode CSS di atas melalui menu Custom Stylesheets.

Cara ketiga:

Menggunakan plugin Code Snippets Anda dapat mendownload plugin tersebut di sini, setelah didownload, diinstall dan diaktifkan Anda akan melihat menu Snippet di menu sidebar kiri Dashboard WordPress, silahkan klik Snippet atau klik Semua Snippet, Anda akan melihat sample CSS di sana, silakan edit, tambahkan kode di atas pada tempat yang telah ditentukan, simpan perubahan, lalu aktifkan kodenya. Jangan lupa untuk membersihkan cache jika Anda menggunakan plugin caching.

Cara keempat:

Melalui kustomisasi tema: Mesikpun Oxygen Builder tidak support tema, tapi kita tetap bisa memasukkan custom CSS di sana dan tetap bekerja sebagaimana mestinya. Yang perlu Anda lakukan hanya: Dari halaman Dashboard WordPress pilih Tampilan > Sesuaikan > CSS Tambahan dan tambahkan kode CSS di atas > Terbitkan. Jangan lupa untuk clear cache jika Anda menggunakan plugin caching.

Kesimpulan:

• Anda dapat menggunakan fitur Codeblock dari Oxygen Builder untuk membuat kolom pencarian kustom dengan HTML & CSS
• Anda hanya perlu menyalin kode HTML di atas, lalu masukkan kode tersebut pada Codeblock. Selanjutnya Anda perlu menyalin kode CSS di atas lalu menambahkannya pada custom CSS, baik melalui Codeblock, Custom Stylesheets di Oxygen Builder, Plugin Code Snippets, atau dengan menambahkan custom CSS pada menu kustomisasi tema.
• Cara di atas juga efektif dalam membuat icon search / pencarian berada di dalam kolom pencarian.