Cara Membuat Search Bar Melayang Responsive Pure CSS

Dalam upaya untuk membuat tampilan web atau blog yang menarik banyak hal yang dilakukan oleh blogger, termasuk dengan menggunakan berbagai widget, script, Popup menu dan sebagainya. Hal ini lumrah dilakukan oleh Blogger.

Bergeser pada era ini ada hal lain yang penting untuk diperhatikan oleh para blogger, ialah loading blog atau web itu sendiri. Sekeren apapun tampilan dari website/blog tersebut, jika loading nya lambat maka pengunungpun pasti akan pergi. Inilah yang menjadi point penting bagi kami.

Bagaimanapun caranya seorang blogger harus membuat tampilan website/blognya menarik diwaktu yang bersamaan juga mempunyai loading yang cepat. Salah satu solusinya adalah dengan memaksimalkan penggunaan CSS pada blog. Pada postingan ini kami akan memberikan tutorial cara membuat menu atau tools yang keren hanya bermodalkan CSS dan Html sebagai pemanggilnya.

Baca Juga : Percepat Loading Blog Dengan Memaksimalkan Penggunaan CSS

Tutorial bagian pertama akan di mulai dari navigasi blog berupa tombol search, Search box adalah salah satu elemen UI yang paling penting yang harus ada di setiap website/blog. Layaknya google, penggunaan Search box pada blog memudahkan pengguna (pengunjung) untuk menemukan konten yang spesifik dalam sebuah blog. Penempatannya pun harus mudah terlihat dan dijangkau oleh pengguna.

Skenario

Dalam tutorial ini kita akan menyembunyikan kolom search (untuk menghemat ruang) dan menampilkannya dengan perintah Show Hide dengan skenario seperti dibawah ini:

1. Tombol search diklik
2. Kotak Pencarian muncul
3. Jika pengunjung klik bagian luar dari Kotak Pencarian, maka Kotak Pencarian otomatis akan disembunyikan.

Skenario diatas akan sangat mudah dijalankan jika menggunakan Javacript, ada sedikit trik yang akan kita gunakan untuk menjalankan skenario diatas hanya dengan menggunakan CSS.

:focus selector dan <label>

Kunci dari trik ini adalah menggunakan CSS selector :focus dan tag html <label>

1. Label : Berfungsi untuk memanggil search box atau input search pada web, setelah itu
2. :focus : Selector CSS digunakan untuk memanggil efek show/hide nya.

Live demo nya bisa Anda temukan pada blog ini, silahkan klik tombol search pada bagian kanan atas. Untuk demo dengan style lain Anda bisa lihat pada halaman di bawah ini:

DemoDownload

Tutorial

Silahkan masukkan kode css dibawah ini kebagian CSS pada website/blog Anda, untuk pengguna Blogger.com silahkan masuk ke tab Temma > Edit HTML lalu cari tag <style> atau <style type='text/css'> dan letakkan kode di bawah ini kedalam bagian tag tersebut:

 /* Search Demo */ #search-form #search-containerin{display: block;width: 100%;position: fixed;top: 38%;left: 0;z-index: 20;padding: 20px 11%;margin-top: -100%;font-size: 30px;font-family: Lato,sans-serif;text-align: center;outline: 0;border: 0;color: #fff;background: transparent;opacity: 0;transition: all 0.3s ease-in-out}   #search-form .search-close{display: block;width: 100%;height: 100%;background: rgba(0,0,0,.6);position: fixed;top: 0;left: 0;z-index: 19;text-align: center;visibility: hidden;opacity: 0;transition: all 0.3s ease-in-out} #search-form .search-close span{bottom: 0;width: 100%;position: absolute;left: 0} #search-form .search-close span i{color: #fff;padding: 7.5px;display: block;font-size: 18px;font-style: normal;width: 40px;height: 40px;text-align: center;background: #414141;border-radius: 50%;cursor: pointer;margin: 0 auto -100%;transition: all 0.3s ease-in-out} #search-form #search-containerin:focus, #search-containerin:focus + .search-close{visibility: visible;opacity: 1;margin: 0} #search-form #search-containerin:focus + .search-close span i{margin: 0 auto 20px} .iSearch{display: inline-block;width: 55px;height: 55px;float: right;text-align: center;cursor: pointer} /* Ini adalah kode css untuk tombol search */ .iSearch svg{width: 20px;height: 20px;display: inline-block;vertical-align: middle;position: relative;top: 15px} 

Ini adalah kode standar search box yang terdapat pada blogger, jika sebelumnya sudah ada kode serupa di blog Anda maka hanya perlu menghapus dan menggantinya dengan kode HTML ini. Kami menggunakan SVG sebagai icon search-nya Anda bisa menggantinya dengan Font-awesome atau font icon bawaan dari blog Anda. ubah tulisan berwarna putih sesuai keinginan Anda jika perlu

 <form expr:action='data:blog.homepageUrl + &quot;search&quot;' id='search-form' method='get'>   <input id='search-containerin' name='q' placeholder='Tulis dan tekan Enter...' type='text'/>   <label class='search-close'><span><i>X</i></span></label> </form>  // Masukkan kode <label> dibawah ini di bagian yang mudah dijangkau oleh pengguna  <label class='iSearch' for='search-containerin'><svg viewBox='0 0 16 16'><path class='path1' d='M15.504 13.616l-3.79-3.223c-0.392-0.353-0.811-0.514-1.149-0.499 0.895-1.048 1.435-2.407 1.435-3.893 0-3.314-2.686-6-6-6s-6 2.686-6 6 2.686 6 6 6c1.486 0 2.845-0.54 3.893-1.435-0.016 0.338 0.146 0.757 0.499 1.149l3.223 3.79c0.552 0.613 1.453 0.665 2.003 0.115s0.498-1.452-0.115-2.003zM6 10c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z'></path></svg></label>   

Penjelasan CSS:

• #search-containerin : Input atau kolom pencarian dibuat melayang terlebih dahulu dengan menuliskan position: fixed;top: 40%;left: 0;, dan input disembunyikan dengan perintah opacity: 0. Tak lupa memberikan efek smooth atau halus ketika kolom tampil, kode CSSnya adalah : transition:all 0.3s ease-in-out yang artinya adalah efek transisi akan ditampilkan selama 0.3 detik
• .search-close : Ini adalah kode CSS untuk menampilkan background pada kolom pencarian ketika input di klik, perintahnya hampir sama dengan #search-containerin
• .search-close span : Merupakan CSS untuk menampilkan tombol 'hilangkan/hide kolom pencarian', lebar dan tingginya diatur dengan ukuran 40px
• #search-containerin:focus : Kode utama yang menjadi kunci untuk menampilkan fungsi ini, ketika form pencarian di klik (dengan bantuan <label>) maka fungsi show hide search box akan otomatis muncul

Jika kesulitan menerapkannya di blog Anda silahkan bertanya di kolom komentar.

Sumber https://www.jagodesain.com/

Bagikan Artikel ini