Cara Membuat Search Box dengan HTML dan CSS

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:

Setelah kita menyelesaikan dibagian index.html kita akan langsung masuk ke CSS nya. Untuk bagian css silahkan teman-teman copy kan.


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;
}

Fungsi dari kode atas untuk memberikan setuhan syle yang sangat keren kepada search box kita agar terlihat lebih profesional dan menarik.

Setelah kita selesai mengtikan kode diatas, hasilnya akan muncul seperti gambar dibawah:

Jika seperti itu, tentunya user tidak bisa menginputkan kata kunci pencarian kedalam search box kita, karna hanya baru berbentuk tombol dan input textnya tersembunyi. Tunggu dulu jangan skip dulu, masih ada kode yang haru kamu tambahkan.

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:

Untuk tutorial lebih lengkap silahkan cek di youtube Channel Search Box in HTML CSS | Cara Membuat Search di HTML

Terimakasih telah berkunung. Semoga bermanfaat.

Janga lupa juga: LIKE, SHARE, DAN SUBSCRIBE, Agar channel mandan koding berkembang, dan bisa menghadirkan tutorial-tutorial menarik dan bermanfaat lainnya.

Cara Membuat Search Box dengan HTML dan CSS

Cara membuat search box dengan HTML dan CSS:

Taraaaaaa.... Hasilnya akan muncul seperi gambar dibawah ini:

Janga lupa juga: LIKE, SHARE, DAN SUBSCRIBE, Agar channel mandan koding berkembang, dan bisa menghadirkan tutorial-tutorial menarik dan bermanfaat lainnya.

إرسال تعليق

Formulir Kontak