Pada kesempatan kali ini, kami akan membagikan tutorial mengenai cara membuat search box dengan HTML dan CSS yang sangat keren. sama-sama kita ketahui, Search Box atau kotak pencarian adalah salah satu yang sangat penting dan harus ada pada sebuah website. Search box memiliki fungsi sama seperti serach engine, yaitu untuk mencari data berdasarkan kata kunci.
Bagi yang lebih suka melihat tutorial melalui video, ayoo kunjungi youtube channel: MandanKoding
 |
| Search Box HTML & CSS |
Cara membuat search box dengan HTML dan CSS:
Dalam contoh kali ini, kita akan membuat search box keren dengan HTML & CSS serta termasuk dengan tombol pencariannya diposisi sebelah kanan.
Sebelu kita mulai, disini kita perlu membuat terlebih dahulu kode HTML. seperti kode dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Box, HTML CSS</title>
<link rel="stylesheet" href="style.css">
<script src="fontawesome/js/all.js"></script>
</head>
<body>
<div class="search-box">
<input type="text" class="search-input" placeholder="Search">
<a href="#" class="search-btn">
<i class="fas fa-search"></i>
</a>
</div>
</body>
</html>
Di dalam kode di atas terdapat <script src="fontawesome/js/all.js"></script> difungsikan untuk menampilkan icon fas fa-search. silahkan download link: fontawesome
Untuk tutorial lebih lengkap silahkan cek di youtube Channel Search Box in HTML CSS | Cara Membuat Search di HTML
Bagi kawan-kawan pemula disarankan untuk membiasakan mengetik kode dan jangan copy-paste agar terbiasa. Simpan kode diatas dengan nama index.html lalu buka di browser, maka hasilnya akan terlihat seperti gambar di bawah:
body {
margin: 0;
padding: 0;
background: #189ABA;
}
.search-box {
top: 20%;
left: 50%;
background: #4c5270;
transform: translate(-50%, -50%);
height: 30px;
border-radius: 5px;
padding: 20px;
padding-bottom: 30px;
position: absolute;
}
.search-btn {
color: #ffffff;
float: right;
height: 40px;
width: 40px;
border-radius: 50%;
background: #189ab4;
justify-content: center;
align-items: center;
display: flex;
}
.search-input {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 14px;
width: 0px;
line-height: 40px;
transition: 0.5s;
}
Setelah kita selesai mengtikan kode diatas, hasilnya akan muncul seperti gambar dibawah:
Untuk kode di atas silahkan simpan dengan nama style.css.
catatan: file diatas harus disimpan dalam 1 folder ya....
Oke kita lanjut, agar input text pencarian kita mucul, kita harus menambahkan beberapa baris kode CSS lagi ke dalam file style.css. letakan kode dibagian line paling bawah. Lihat kode dibawah:
.search-box:hover > .search-input{
width: 240px;
padding: 0 10px;
margin-right: 5px !important;
background: white;
border-radius: 5px;
color: black;
}
.search-box:hover > .search-btn {
background: #E9dac4;
color: #189ab4;
}
Jadi kode di atas berfungsi untuk mengaktifkan elemen search box kita menjadi show, disaat kursor mengarak ke tombol searc box.
Taraaaaaa.... Hasilnya akan muncul seperi gambar dibawah ini:
Terimakasih telah berkunung. Semoga bermanfaat.
Post a Comment