Cara Membuat Kotak Tombol Pencarian dengan HTML dan CSS
Kotak pencarian atau dalam kata istilahnya adalah search box untuk sebuah website atau blog sangat berperan penting agar membuat situs kamu menjadi user frendly.
Apa maksud kata " User Frendly " singkat kata pengertiannya adalah mudah untuk digunakan oleh manusia, bukan untuk mesin robot.
Jadi apabila blog tanpa ada kotak pencarian sangat disayangkan karena sudah mengurangi nilai kemudahan untuk orang lain yang membaca artikel kamu.
Apabila kamu seorang pengelola blog, tema yang akan kamu pilih harus di perhatikan dari mulai kemudahan navigasi link menu dan juga itu tadi, kotak pencarian untuk memudahkan orang lain mencari artikel lainnya.
Dalam halaman ini, kami akan memberikan lagi tutorial yang berkaitan dengan desain template blogger, sebelumnya juga kami sudah membahas tutorial membuat menu dropdown di blogger tapi cara sebelumnya tidak menggunakan kotak pencarian.
Membuat Search Box dengan CSS dan HTML
Harus diperhatikan, sebelum menuju langkah ini, kamu harus sudah memiliki bagian area peletakan kotak pencarian ini. Sebagai bahan contoh kotak pencarian itu bergabung dengan area menu dropdown.
Salin kode HTML dibawah ini.
<div class='search-icon'> <a href='#searchfs'><i class='material-icons'>search</i></a> </div> <div id='searchfs'> <button class='close' type='button'>×</button> <form action='/search' id='search-form' method='get'> <input name='q' placeholder='isi tulisan...' type='search' value=''/> <input name='max-results' type='hidden' value='7'/> </form> </div>
Keterangan :
- Warna merah yang saya jadikan tanda diatas adalah bagian-bagian yang bisa kamu ubah sesuai selera.
<i class='material-icons'>search</i>
adalah kode icon search, disana saya menggunakan icon marterial. Bisa juga kamu menganti icon FontAwesome atau SVG.×
adalah kode icon tutup, silahkan ubah sesuai selera kamu.Isi tulisan....
- Adalah tulisan yang tampil dalam kotak pencarian.Value='7'
- Jumlah artikel yang akan tampil jika digunakan kotak pencarian.
Baca juga : Cara Memasang Icon SVG di Blog
Dalam langkah meletakan kode HTML kotak pencarian diatas, kamu harus meletakannya dibagian kode penutup
</nav>
atau </menu>
sesuai kode class
pemanggil kode area menu dropdown.Sehingga menjadi seperti dibawah ini untuk susunan keseluruhan kode HTML nya.
<nav id='cssmenu'>
daftar menudropdwon
</nav>
<div class='search-icon'>
<a href='#searchfs'><i class='material-icons'>search</i></a>
</div>
<div id='searchfs'>
<button class='close' type='button'>×</button>
<form action='/search' id='search-form' method='get'>
<input name='q' placeholder='type to search' type='search' value=''/>
<input name='max-results' type='hidden' value='7'/>
</form>
</div>
Hanya contoh kode saja untuk area yang saya beri tanda merah diatas. jadi untuk susunan kode HTML nya kurang lebih seperti itu gambaranya.Membuat Search Box dengan CSS
Seperti biasa, kita beri keindahan tampilan search box nya menggunakan kode CSS.
Salin lagi kode CSS dibawah ini.
/* SEARCH FORM */ .search-icon { position: absolute; - POSISI MELAYANG KEATAS top: 18px; - UKURAN KETINGGIAN POSISI ICON SEARCH right: 0px; - POSISI KANAN ICON TIDAK ADA font-size: 19px; - UKURAN HURUF / ICON SEARCH } .search-icon a { color: #444444; - KODE WARNA ICON } #searchfs { position: fixed; - POSISI MELAYANG DIATAS, HANYA SAJA SEDIKIT BERBEDA KARENA INI MENGGIKUTI z-index:9999; - KENAMPAKAN top: 0px; left: 0px; width: 100%; - LEBAR AREA PENCARIAN height: 100%; - TINGGI AREA PENCARIAN background-color: rgba(0, 0, 0, 0.8); - WARNA LATAR PENCARIAN -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; -webkit-transform: translate(0px, -100%) scale(0, 0); -moz-transform: translate(0px, -100%) scale(0, 0); -o-transform: translate(0px, -100%) scale(0, 0); -ms-transform: translate(0px, -100%) scale(0, 0); transform: translate(0px, -100%) scale(0, 0); opacity: 0; } #searchfs.open { -webkit-transform: translate(0px, 0px) scale(1, 1); -moz-transform: translate(0px, 0px) scale(1, 1); -o-transform: translate(0px, 0px) scale(1, 1); -ms-transform: translate(0px, 0px) scale(1, 1); transform: translate(0px, 0px) scale(1, 1); opacity: 1; z-index: 9999; } #searchfs input[type="search"] { position: absolute; top: 50%; left: 0; margin-top: -51px; width: 70%; margin-left: 15%; color: rgb(255, 255, 255); background: transparent; border: 1px solid rgba(255, 255, 255, .8); border-radius: 5px; font-size: 40px; text-align: center; outline: none; padding: 10px; } #searchfs .close { position: fixed; - ICON PENUTUP MELAYANG DIATAS top: 20px; right: 30px; color: #fff; background-color: transparent; opacity: 0.8; - WARNA SEDIKIT DI SAMARKAN font-size: 40px; - UKURAN ICON border: none; - GARIS TIDAK ADA outline: none; } #searchfs .close:hover { cursor: pointer; }Lalu letakan kode CSS diatas, tepat dibagian kode penutup
]]></b:skin>
atau </style>
Untuk membuat icon searchnya menjadi responsive, maka kita perlu menambah kode CSS dibawah ini.
/* MEDIA QUERY */ @media only screen and (max-width:1080px){ .search-icon { right: 30px; } } @media only screen and (max-width:800px){ .search-icon { right: 24px; } } @media only screen and (max-width:640px){ .search-icon { right: 18px; } } @media only screen and (max-width:480px){ .search-icon { right: 15px; } } @media only screen and (max-width:320px){ .search-icon { right: 13px; } }Nah bagi kamu yang ingin menggunakan icon marterial seperti milik saya, bisa gunakan kode
@font-face
dibawah ini.
@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: inherit; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; vertical-align:middle; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; }Simpan kode diatas, dibagian kode atas
</style>
Memasang Script Kotak Pencarian di Blogspot
Tambahkan kode sricpt dibawah ini dibagian atas kode
</body>
<script> //<![CDATA[ // search form $(function(){$('a[href="#searchfs"]').on("click",function(e){e.preventDefault(),$("#searchfs").addClass("open"),$('#searchfs > form > input[type="search"]').focus()}),$("#searchfs, #searchfs button.close").on("click keyup",function(e){e.target!=this&&"close"!=e.target.className&&27!=e.keyCode||$(this).removeClass("open")})}); //]]> </script>
Kesimpulan
Demikian tutorial yang dapat kami sampaikan tentang masalah pembuatan kotak tombol pencarian menggunakan HTML dan CSS. Jika ada yang kurang kamu pahami dengan langkah diatas, jangan ragu untuk menulis komentar dibawah ini.
2 komentar untuk "Cara Membuat Kotak Tombol Pencarian dengan HTML dan CSS "
Kami memiliki kebijakan dalam berkomentar di Blog ini :
— Dilarang promosi suatu barang
— Dilarang jika memasang link aktif di komentar
— Dilarang keras melakukan promosi iklan
— Dilarang menulis komentar yang berisi sara, bully atau cemuhan
NB :Komentar yang melanggar tidak akan ditampilkan
Kebijakan komentar yang bisa Anda temukan selengkapnya disini
Dukungan :
Jika menyukai dengan artikel blog kami, silahkan Ikuti blog ini
mas mau tanya ketika saya klik tombol perncarian, tidak terjadi apa2.
BalasHapusyang keluar malah tambahan url #searchfs di belakang alamat blog saya.
www.namablog.com/#searchfs
solusinya gimana ya?
Belum di tambahkan JavaScriptnya
Hapus