Cara Gampang Membuat Kotak Pencarian/Search Box Responsive Dengan CSS & HTML

kotak pencarian

• Membuat Kotak pencarian / search box

Postingan kali ini membahas tentang cara membuat kotak pencarian (search box) responsive dengan css dan html yang simple dan gampang. Kotak pencarian / search box ini adalah bagian yang terpenting dari sebuah blog atau website,dengan menggunakan kotak pencarian / search box ini kita bisa mencari data / info yang kita butuhkan dengan  mudah.


Pada tutorial cara membuat kotak pencarian / search box ini saya menggunakan Css dan html unutk mendesainnya. Tidak perlu panjang lebar lagi mari kita simak cara membuat kotak pencarian di bawah ini.

Pertamatama :

• Siapkan text edtor (noepat ++,sublime text,dreamweaver .dll)
• Buat sebuah file baru dan beri nama index.html.

Jika sudah mengikuti langkah di atas copy kode html di bawah ini dan paste di file anda.

<div class="container">
<div class="search-box">
<form action="" method="Post">
<input name="search" placeholder="Cari di sini.." required="yes" type="text" />
    <button type="submit">Cari</button>
   </form>
</div>
</div>

Penting !:

kode di atas hanya sebagian kecil dari script html yang asli, jadi pastikan anda telam membuat script dasarnya terlebih dahulu

Kedua:

 jika anda telah selesai untuk kode yang di atas, sekarang tinggal membuat script CSSnya.

• Buat file baru dengan nama style.css

Copy kodedibawah ini dan paste di file anda.

.container{margin-top:10%;}
.search-box{
 width:50%;
 min-height:10px;
 margin:0px auto;
 position:relative;
 border:1px solid #ddd;
 padding:5px;
 overflow:hidden;
 box-shadow:0 3px 8px #bbb;
}
.search-box > form {
 width:100%;
}
.search-box > form input[type="text"]{
 width:80%;
 padding:12px;
 border:1px solid #ddd;
 float:left;
}
.search-box > form > button {
 width:20%;
 padding:12px;
 border:1px solid #ddd;
 float:left;
 cursor:pointer;
 background:#097279;
 color:#fff;
}
@media (max-width:600px){
 .search-box{
  width:100%;
 }
}

jika sudah selesai, sekarang hubungkan kedua file di atas dan save pekerjaan anda.Lalu coba andalihat hasil pekerjaan anda di browser.

jika terjadi kesalahan / ketidak cocokan hasil anda dengan tutorial yang saya berikan ini silahkan berkomentar di bawah ini. 

Anda jiga bisa mendownload hasil saya yang di atas itu di bawah ini

Download

oke sekian tutorial cara membuat kotak pencarian responsive dengan CSS dan hmtl dari saya, semoga ilmu yang saya berikan ini bermanfaat bagi orang banyak, sekian dan trimakasih..