Praktek Penerapan dan Cara Mengatur Form Search Responsive pada Blog dengan Mudah

Berbicara mengenai search box atau kotak pencarian adalah hal yang biasa-biasa saja, setiap kita mengunjungi suatu situs pasti telah menyediakan layanan pencarian, karna begitu pentingnya banyak yang mendesain form search atau kotak pencarian mereka dengan berbagai gaya dengan desain yang  betul-betul menarik perhatian pengunjung untuk menggunakannya.

Saya tidak akan menjelaskan secara terperinci karna saya yakin anda sudah mengetahui fungsi dari search box tersebut. Namun perlu anda ketahui, bahwa Praktek/tutorial kali ini akan menggunakan desain yang menurut saya sangat sederhana minimalis namun menarik perhatian, gambar di atas adalah hasil dari kreasi saya dalam menerapkannya di blog ini:

Saya yakin anda bisa bereksperimen lebih dari pada saya sehingga hasilnya bisa jauh lebih menarik.

Bagaimana cara penerapan dan pemasanganya? Berikut prakteknya bisa anda ikuti step by step.

1. Masuk ke Dashboard.
2. Lalu pilih template.
3. Selanjutnya pilih Edit HTML.
4. Lalu cari kode aside (Gunakan CTRL + F agar pencarian lebih mudah).

5. Lalu pastekan kode HTML di bawah ini tepat di bawah kode <aside id

HTML :

    <div id='search-box'>
    <form action='/search' id='search-form' method='get' target='_top'>
    <input id='search-text' name='q' placeholder='Seacrh Here...' type='text'/>
    <button id='search-button' type='submit'><span><i aria-hidden='true' class='fa fa-search'/> Search</span></button></form></div>

Ket : Anda bisa mengganti teks warna biru sesuai dengan keinginan anda. Warna hijau bisa anda hilangkan atau anda ganti dengan icon lain. Warna ungu bisa anda ubah kedalam bahasa lain misalkan CARI DISINI, CARI ARTIKEL dan sebagainya.

6. Lanjut dengan mencari  </head>  Jika sudah ketemu letakkan CCS berikut di atasnya

<style>
#search-box{position:relative;top:20px;margin:10px auto;border:1px solid #ccc;padding:5px;}#search-form{height:35px;background-color:#fff;overflow:hidden}#search-text{font-size:12px;color:#ddd;border-width:0;background:transparent;line-height:15px}#search-box input[type=&quot;text&quot;]{width:90%;padding:10px 0 5px 1em;color:#333;outline:none}
#search-button{position:absolute;top:5px;right:5px;height:35px;width:80px;font-size:12px;color:#fff;text-align:center;border-width:0;background-color:#ff5848;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}#search-button:hover{background:#333}
</style>

Ket : Sesuaikan dengan template anda text warna merah di atas adalah pengaturan letaknya, untuk yang warna kuning adalah ukuran huruf, wana biru adalah untuk mengatur lengkungan pada sudut search. Jika ada yang kurang jelas silahkan berkomeentar atau melalui email pada bagian Kontak.

7. Save template anda dan lihat hasilnya.

Itulah cara penerapan kolom pencarian yang menurut saya cukup praktis dan mudah diterapkan pada blog anda.