Cara Membuat Form Pencarian Terhubung Query dengan CSS

Selama ini, saya melihat berbagai artikel di internet mengenai cara membuat form pencarian hanya berfokus kepada CSS nya saja, tidak ada yang membahas cara agar form pencarian tersebut bisa terhubung dengan Query.

Hai, Pada kesempatan kali ini, saya akan membahas mengenai form pencarian berbasis CSS. CSS juga membantu meringankan beban loading blog karena sejatinya CSS memang tidak melambat loading blog.

Selama ini, saya melihat berbagai artikel di internet mengenai cara membuat form pencarian hanya berfokus kepada CSS nya saja, tidak ada yang membahas cara agar form pencarian tersebut bisa terhubung dengan Query.

Kalau hanya berfokus terhadap CSS nya saja dan tidak mementingkan bagaimana cara menghubungkan dengan query, saya rasa itu ibarat sebuah pajangan mempercantik tampilan blog dan tak berguna sama sekali.

 Nah, berikut cara membuat form pencarian yang terhubung dengan query dan dengan sentuhan dari CSS versi PenggemarKoding.

1. CSS
Langkah pertama untuk mendesain form pencarian adalah dengan bantuan CSS, saya sarankan untuk menyimpannya di internal CSS ( didalam bagian <style> atau <b:skin ). Berikut code CSSnya.

/*SEACRH BOX BY PenggemarKoding*/
.search-box {
    margin-top:6em;
    width:299px;
    height:32px;
    background: #2b303b;
    border-radius: 7px;
}
.search {
    color:white;
    font-family: century Gothic;
    width:14em;
    background:#2b303b;
    border:1px solid #2b303b;
    border-radius: 7px;
    padding-top: .30em;
    padding-bottom: .30em;
    padding-left: 1em;
    padding-right: 1em;
}
.button {
    padding:6px 15px;
    left:-8px;
    border: 0px;
    height:32px;
    margin-left: 5px;
    border-radius: 15px;
    background-color:white;
    color:black;
}
.button:hover  {
border:1px solid black;
    background-color:black;
    color:white;
}


Itulah code CSS untuk form pencariannya. Berikut penjelasan dari beberapa kode yang bisa kamu ubah sesuai kebutuhan kamu.

  • untuk CSS .search-box, maka saya hanya merekomendasikan untuk mengganti background dan border-radiusnya saja, jika kamu mencoba untuk menukar heigth ataupun width, maka tombol pencarian dengan kotak pencarian akan tidak rapi susunannya.
  • untuk CSS .button, saya hanya merekomendasikan pengubahan dalam background dan border-radiusnya saja.
Namun jika kamu sudah mahir untuk mengedit CSS dan terlihat rapi, maka abaikan rekomendasi saya.

1. Eksekusi HTML
Nah setelah kamu telah mengetahui code CSS untuk tampilannya, tentu langkah selanjutnya adalah cara menampilkan form pencarian tersebut dan tentunya langsung terhubung dengan Query. Code berikut ini disimpan di bagian <body> agar tampil di website / blog kamu. berikut kodenya

<form class='search-box' expr:action='data:blog.searchUrl' expr:id='data:widget.instanceId + &quot;_form&quot;'>
                <tr>
                <td class='search'>
                  <input autocomplete='off' class='search' expr:action='data:blog.searchUrl' expr:id='data:widget.instanceId + &quot;_form&quot;' expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' name='q' placeholder='Cari...' size='10' title='Pengen cari apa?' type='text'/>
                </td>
 <td class='button'>
                  <input class='button' expr:value='data:messages.search' type='submit'/>
                </td>
</tr>
 </form>

Itulah cara membuat form pencarian yang terhubung dengan Query dan dengan sentuhan CSS versi PenggemarKoding. Namun jangan langsung disave di template website / blog kamu yah. Coba dicek dahulu code yang saya sebutkan di situs yang menyediakan layanan untuk membuat template, saya sarankan Codepen. Copy code berikut di akun codepen kamu dan silahkan di edit terlebih dahulu sesuai keinginanmu sebelum tampil di situs kebangganmu.

<!DOCTYPE html>
<html>
<head>
<style>
/*SEACRH SECTION*/
.search-box {
    margin-top:6em;
    width:299px;
    height:32px;
    background: #2b303b;
    border-radius: 7px;
}
.search {
    color:white;
    font-family: century Gothic;
    width:14em;
    background:#2b303b;
    border:1px solid #2b303b;
    border-radius: 7px;
    padding-top: .30em;
    padding-bottom: .30em;
    padding-left: 1em;
    padding-right: 1em;
}
.button {
    padding:6px 15px;
    left:-8px;
    border: 0px;
    height:32px;
    margin-left: 5px;
    border-radius: 15px;
    background-color:white;
    color:black;
}
.button:hover  {
border:1px solid black;
    background-color:black;
    color:white;
}
</style>
</head>
<body>
<form class='search-box' expr:action='data:blog.searchUrl' expr:id='data:widget.instanceId + &quot;_form&quot;'>
                <tr>
                <td class='search'>
                  <input autocomplete='off' class='search' expr:action='data:blog.searchUrl' expr:id='data:widget.instanceId + &quot;_form&quot;' expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' name='q' placeholder='Cari...' size='10' title='Pengen cari apa?' type='text'/>
                </td>
 <td class='button'>
                  <input class='button' expr:value='data:messages.search' type='submit'/>
                </td>
</tr>
 </form>
</body>
</html>

Itulah cara membuat form pencarian dengan sentuhan CSS versi PenggemarKoding. Ayo dukung situs ini agar selalu hadir dengan berbagai artikel dan tutorial menarik lainnya dengan cara memberikan tanggapan kamu mengenai artikel yang PenggemarKoding tulis melalui menekan tombol perasaan. Share juga berbagai artikel PengemarKoding agar yang lain juga tahu kalau di PenggemarKoding ada tutorial yang mereka inginkan. Karena dengan saling berbagi ilmu biar makin berilmu.