Cara paling mudah membuat tombol search keren

Gimana nih kabarnya sobat bloger ?
Mudah-mudah baik-baik aja ya :)
Pada kesempitan kesempatan ini saya akan berbagi tutorial mengenai cara membuat tombol search keren di blog.
Pasti ingin dong blognya terlihat menarik dimata pengunjung ?
nah kenapa gak coba tutorial ini aja, dijamin tombol search sobat jadi terlihat menarik dimata pengunjung.
Apa sih rahasianya ?
ini dia kode rahasianya :

<style type="text/css">
#search{position:absolute;top:80px;right:200px}
.search form{width:260px;height:30px;background: url(http://img268.imageshack.us/img268/1398/searchln.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:#000000}
.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='Cari aja disini !!!' type='text'/>
<input id='search-submit' name='' type='submit' value=''/>
</form>
</div>
</div>

Itu dia kode rahasianya, sekarang tinggal kita terapkan saja pada blog sobat masing-masing
Caranya gambang sob,
1. anda login dulu ke blogger
2. masuk ke menu Rancangan
3. pilih tambah gadget
4. kemudian ilih yang HTML/JavaScript
5. Kalian paste deh kode rahasia tadi

Selesai :)
Ini dia penampakannya, hihihi

*jika kalian ingin berkreasi sendiri anda bisa mengganti http://img268.imageshack.us/img268/1398/searchln.png dengan URL gambar kotak search anda sendiri

Oke deh, sekian tutorial membuat  tombol search keren
semoga bermanfaat :)

Artikel Terkait:

Posted in: Blog tutorial