Cara membuat kotak pencarian yang keren dan elegan

By: Johan Supriyanto, S.Kom. -
Pada kesempatan yang baik ini saya akan berbagi ilmu lagi yang masih ada hubungannya dengan widget. Apabila anda  memperhatikan gambar dan judulnya, anda pastinya sudah mengerti apa yang akan saya bagikan kali ini?
Pada artikel kali ini saya akan membahas tentang bagaimana cara membuat widget kotak pencarian. Pada kotak pencarian seperti gambar di atas telah di modifikasi dari segi bentuk sehingga terkesan elegan, indah dan menambah beban blog, kotak pencarian tersebut sudah dimodifikasi agar menjadi ringan dan tidak membuat blog mejadi loding lama. Apakah anda tertarik untuk membuatnya? Jika tertaruk, langsung saja simak penjelasan saya berikut ini:

1.) Silahkan masuk ke akun blogger anda
2.) Kemudian masuk ke Dashboard > Tata Letak > Tambah Gadget > Html/Javascript
3.) Kemudian, copy kode dibawah ini dan kemudian paste didalam kotak kosong bernama Konten

Kode:
<style type="text/css">
#search{position:absolute;top:80px;right:200px}
.search form{width:260px;height:30px;background:transparent url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjlbR5Mo2Ef55FvF0jCWxwfTYh5ZruvKeMB3iJ9RZwjjvTDefEZ333FMsHCrhjSTnDlKknOORgsoYw1-oVQEsn34YYA2kXXIAMzGPrIzRFSVbQshGA_wQl4bhyHS4taNkbkY9iI3W6cws/s1600/searchform.png&#39;) no-repeat 0 0;position:relative}
.search input#search-text{position:absolute;left:10px;top:0;border:0;background:none;width:150px;height:30px;line-height:25px;color:#7b7b7b}
.search input#search-submit{position:absolute;top:0;right:0;width:73px;background:none;border:none;cursor:pointer;height:26px;line-height:26px}
.status-msg-wrap{display:none}.status-msg-body{display:none}
.status-msg-border{display:none}
</style>
<div id='pencarian'>
<div class='search'>
<form action='/search' id='search-form' method='get'>
<input id='search-text' name='q' placeholder='Pencarian Kata Kunci' type='text'/>
<input id='search-submit' name='' type='submit' value=''/>
</form>
</div>
</div>
4.)  Jika sudah jangan lupa klik Simpan , dan lihat hasilnya
Demikian penjelasan tentang cara membuat kotak pencarian yang keren dan elegan, mudah-mudahan apa yang saya sampaikan dapat bermanfaat buat anda semua.
Jika artikel diatas anda rasa sudah tidak relavan dan tidak layak untuk dibaca, saya mohon bantuannya dengan cara berkomentar di postingan ini. InsyaALLAH , saya akan segera memperbaikinya.

Komentar

Posting Komentar