Membuat Search Form dengan Tambahan Animasi

Cara Membuat search form di tambah dengan animasi di sampingnya, itu topik hari ini yang saya akan bahas.
Cara membuatnya sangat mudah, kita hanya perlu menambahkan sedikit gambar animasi, kalau yang punya animasi sendiri bisa kok. Coba siapkan animasi anda sendiri, contoh gambar.

Mari kita mulai membuat nya.

1. Untuk pertama anda Login dulu ke blog anda. Masuk ke Rancangan > Edit HTML.
2. Centang Expand Template Widget, Lalu perhatikan kode di bawah ini, Copas kode nya lalu letakkan di atas :
]]></b:skin> , Jika anda sudah mempunyai search form, css yang lama anda hapus dan ganti saja dengan yang baru. Berikut kode nya :

#main_search{
float:right;
width:331px;
height:49px;
margin:42px 0 0 0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRptQoec0RVNR4Qi3nj3K9MDA0GnEDxnz4_xHxQeD_4DLoAmSUAAZJHvuQx9k_f27g30LuP7a0pv_NCUqC28Xns2rJwUqDDcqbisI9Sf-nsi3z2CF8WpfZtdgPIsgfPwiARAaoII1avQ6x/s1600/bgr_main_search.png) no-repeat;
}
#searchform_top{
padding:10px 0 15px 10px;
float:left;
}
#searchform_top_text{
width:210px;
border:0px;
background:#fff;
padding:6px;
color:#4c4c4c;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
float:left;
margin:1px 7px 0 0;
}
#gosearch{
float:left;

3. Bisa di simpan dulu atau ingin melanjutkan silahkan, hehe
4. Jika anda sudah mempunyai kode search form, hapus kode search form nya. Lalu ganti yang baru, berikut kode nya :

<div id='main_search'>
<form action='/search' id='searchform_top' method='get'><div>
<a href='http://feeds.feedburner.com/BlogGecok' id='header_rss' title='RSS'><img alt='Skinpress Demo Rss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkZ4lYu05pr2ReWaIgJRqwPc4AvyJLmHjFppSQqCSc6GdXojE1v-FWi0phZ3kGFhPVJSxcBaf4tF-ar5CjvuKBIpFP6AKZr8pWdSauLU3zcmRCmmXGvEQnD-4DlQNTcNYfPTj7KDu7rX6i/s1600/button_rss.png'/></a>
<input id='searchform_top_text' name='q' onclick='doClear(this)' type='text' value='Type your search here...'/>
<input id='gosearch' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhphK-cem4N6JHmKqzdgJs0lRCA775fMiuv0-PHyGnSgFSHbgvBkZfH7vfEYekbKumGFp2_4fpTjq7P3arfpo2hEpkXXBj6E67qacIVI_7Nbhbg0jdSGTfhThiJF9qZjeYr5aW2dID08i8A/s1600/button_go.png' type='image'/></div>
</form>
</div>

</div>

Nb: Teks yang di cetak tebal itu bisa di ganti, contoh /feeds/posts/default. Teks yang berwarna merah itu adalah gambar/animasi yang akan anda berikan di search formnya.