Tutorial:Como colocar caixa de pesquisa diferente

Oi,eu sou uma das postadoras aqui do Blog me chamo Daniely mas prefiro ser chamada de Dany
hoje venho ensinar como coloca a caixa de pesquisa bonita,diferente daquela que tem nas opções do blog,vamos ao tutorial?

1-Entre no Layout do Blog

2-Adicionar gadget

3-Html/javascript

4-Copie e cole o código abaixo,para ter essa caixinha:

Esse código:

<style>
#white #search {


}

#white #search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqsOj1VDYB3ju4YSmTnNuANtqmGESxL4JH2yc-tFmKqQaVPsk5hRfc_MijtcbF47rcNypvtd1V5Ri-3igrNxWZEN30qK9bd3qRlAFNFM_DVPPvmUucsUY-NW6tFELnB0CKW_GNTSnhXAY/s1600/search-white.png) no-repeat 10px 6px #fcfcfc;
    border: 1px solid #d1d1d1;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#white #search input[type="text"]:focus {
    width: 200px;
    }
</style>
<div id="white">
<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="BUSQUE AQUI!" />
</form>
</div>

Aonde está escrito:
"BUSQUE AQUI!"
vc pode trocar o texto!