Ya, kali ini saya akan memposting dan membahas tuntas cara membuat widget kotak pencarian seperti yang saya sedang pakai di blog ini atau bisa dilihat juga lewat Screenshoot diatas. Kotak pencarian kali ini telah di modifikasi dari segi bentuk sehingga terkesan elegan dan indah, untuk masalah nambah beban blog, saya rasa sama sekali tidak memberatkan , karena kali ini kotak pencarian ini dibuat seringan mungkin. Penasaran? tertarik untuk membuatnya? langsung saja kita bahas dan simak tutorialnya bersama-sama disini .
1.) Baca Basmallah
2.) Login ke akun blogger sobat
3.) Masuk ke Edit Tata Letak
Blogger baru : Tata Letak
Blogger lama : Rancangan > Edit Tata Letak
4.) Klik Tambah Gadget di tempat yang anda inginkan > Html/Javascript
5.) Jika sudah terlihat tampilannya, masukkan kode dibawah ini didalam kotak kosong bernama Konten
<style type="text/css">6.) Klik Simpan , dan lihat hasilnya
#search{position:absolute;top:80px;right:200px}
.search form{width:260px;height:30px;background:transparent url('http://4.bp.blogspot.com/-6sVCcXv5sLw/Tkl5X1gF0KI/AAAAAAAAASY/AWOycgLsW1M/s1600/searchform.png') 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>
