Cara membuat kotak Pencarian atau search box Terbaru

Daftar Isi [Tampil]

Hello sobat desain kali ini saya akan memberikan informasi mengenai bagaimana cara mendesain kotak pencarian didalam blog kita agar semakin keren dan menarik 🤔

Sebagai informasi kami menyediakan jasa desain kepada anda, jika anda ingin mempunyai sebuah blog dengan tampilan yang unik dan berbeda dari biasanya anda bisa menghubungi kami atau kamu bisa melihat laman promosi dari kami untuk anda, periksa dengan tombol dibawah ya 😊

• Periksa

Fungsi kotak pencarian

Fungsi dari kotak pencarian atau search box didalam sebuah situs web memiliki kegunaan untuk mempermudah para pengguna atau pembaca yang ingin menemukan setiap artikel didalam situs web tersebut

Dalam artian lain kamu bisa mencari artikel lainnya didalam situs web tersebut menggunakan kotak pencarian yang tersedia, namun artikel yang terindex hanya artikel yang dipublikasikan didalam situs web tersebut, berbeda hal ya dengan search box atau mesin pencarian Google yang mampu mencari seluruh artikel atau situs web 😯

Cara penerapan

Untuk memulai membuat atau mempercantik tampilan Kotak pencarian blog kamu, yang harus kamu lakukan pertama adalah :

Salin kode CSS berikut ini dan letakkan diatas kode ]]></b;skin> atau sebelum kode ]]></b;skin>

/* Search Box by Desain Limited */

.DLsearch{position:absolute;right:0;top:0;bottom:0}.DLsearch svg{width:24px;height:24px}.DLsearch svg path{fill:#fff}.DLsearch .search .input{background-color:#000;color:#fff;width:0;height:30px;border-radius:15px;vertical-align:bottom;top:9px;right:80px;position:relative;transition:all .3s ease;outline:0;border:none;z-index:3}.DLsearch .searchDL .iconDL{position:absolute;top:8px;right:80px;border-radius:25px;padding:4px;transition:all .5s ease;cursor:pointer;z-index:3}.DLsearch .searchDL .iconDL .openDL{display:block}.DLsearch .searchDL .iconDL .close{display:none}.DLsearch .searchDL .check:checked~.input,.DLsearch .searchDL .input:focus{padding:0 40px 0 15px;width:calc(1011px - 15px)}.DLsearch .searchDL .check:checked~.iconDL .openDL{display:none}.DLsearch .searchDL .check:checked~.iconDL .closeDL{display:block;position:relative;right:2px}.DLsearch .searchDL .check:checked~label:hover{background-color:transparent!important}.DLsearch .searchDL .check:checked~.icon>svg path{fill:#000}@media screen and (max-width:600px){.DLsearch .searchDL .check:checked~.input,.DLsearch .searchDL .input:focus{width:calc(100vw - 145px)}}@media screen and (max-width:1130px){.DLsearch .search .check:checked~.input,.DLsearch .searchDL .input:focus{width:calc(100vw - 150px)}}

Cari Kode HTML (Search box)

Langkah selanjutnya kamu cari kode HTML Search box nya! Kode yang mana 🤔? Nah untuk mempermudah anda cari kode yang serupa seperti kode dibawah ini

<div class='searchBox'> <!-- sampai kode --> </div>

Dikarnakan setiap template nya berbeda jadi carilah kode yang serupa seperti contoh kode diatas, biasanya terletak diatas kode </header> cari secara perlahan ya 😯

Ganti kode HTML (Search box)

Jika sudah ketemu lalu hapus kemudian ganti kode yang kamu hapus tersebut dengan kode dibawah ini

<div class='DLsearch'><form action='/search' class='searchDL' method='get'><input class='check' id='DLsearch' type='checkbox'/><input class='input' name='q' placeholder='Desain Limited' type='text'/><label class='iconDL' for='DLsearch'><svg class='openDL' viewBox='0 0 24 24'><path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'/></svg><svg class='closeDL' viewBox='0 0 24 24'><path d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/></svg></label></form></div>

Nah sobat desain mudah bukan 🤨 silahkan kamu ubah kode CSS nya untuk membuat tampilannya semakin menarik ok 👌

Follow

Desain Limited Content Creator, Writer, Vidio Creator, Design Website, Design Template, Design Grafis

Bagikan Artikel ini