Membuat kotak search dengan efek jquery

1.Log in ke Blogger.
2.pilih tambah  gadget  HTML/JavaScript
3.copy paste code script di bawah ini

<style>#search input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizLqKR4IOQNn-CP2hezHS_1uBscAajcAx4L1SYHCKQfTD3Sur-5CVKBnaUxdTeOhJGPo3t6gGCg1mcrrA0cbF27YdbmZmv0oJvMOsCgYkyq_VdsrSlSBU3Kak1Lc9r3Y-XJmpCbRRhVcc/s35/search.png) no-repeat 8px 6px;border:1px solid #434343;font:16px Times New Roman,Helvetica,Sans-serif;color:#434343;width:190px;padding:6px 15px 6px 35px;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.3),inset 0 1px 3px rgba(0,0,0,0.2);-moz-box-shadow:0 1px 0 rgba(255,254,255,0.3),inset 0 1px 3px rgba(0,0,0,0.2);box-shadow:0 1px 0 rgba(255,255,255,0.3),inset 0 1px 3px rgba(0,0,0,0.2);-webkit-transition:all .7s ease 0s;-moz-transition:all .7s ease 0s;-o-transition:all .7s ease 0s;transition:all .7s ease 0s}#search input[type="text"]:focus{width:225px}</style>
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>