Form pencarian adalah komponen yang sangat penting pada blog. Karena dengan form pencarian, pengunjung dapat menjelajahi seluruh isi atau konten blog yang kita tulis. Form pencarian bisa diletakkan di dalam kode html blog, bisa juga dijadikan widget. Biasanya form pencarian ini diletakkan di sebelah dropdown menu, atau pada widget sidebar atau bisa juga diletakkan pada widget di bawah postingan.
Tampilan form pencarian yang akan dibuat adalah seperti pada gambar di bawah ini
Langsung saja, berikut adalah kode html dan css yang dibutuhkan untuk membuat form pencarian pada blog.
Kode html
<div id='menu-search'>
<form action='/search' method='get'>
<input name='q' placeholder=' Search' type='text'/>
<button type='submit'><span>search</span></button>
</form>
</div>
Salin kode tersebut di mana saja, bisa dijadikan widget atau diletakkan pada kode html.
Kemudian untuk kode css yang diperlukan
#menu-search{
top:5px;
position:relative;
}
#menu-search input{
height:32px;
border:none;
width:120px;
border:2px solid #424242;
float:left;
}
#menu-search button{
color:white;
cursor:pointer;
font-weight:bold;
height:32px;
width:52px;
border:0;
float:left;
background-color:#424242;
}
Salin kode css di atas di atas kode
<b:skin><![CDATA[
Kode css di atas dapat dikustomisasi, misal untuk mengganti ukuran lebar, tinggi, warna latar dan lain sebagainya.
Demikian cara membuat form pencarian pada blog.
Related Posts