Caixa de pesquisar Personalizada!

(OwO) - Sou louco por esse óculos...

Yo miina!  Me fizeram um pedido (Byel Af), aliás é o primeiro pedido que me fizeram até agora (*u*)  Oh GOD estou crescendo. Pois é, o pedido foi, como colocar a caixa de pesquisa igual a minha. Veja o Exemplo:

Então...Vamos lá ao tutorial.

Primeiro Passo:

Vá em Design   Elementos da Página   Adicionar um Gadget    Html/Javascript

E cole o seguinte código:

<form action ="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="""/>
<input class="searchbut" type="submit" value=""/>
</form>

Segundo Passo:

Vá em Design   Editar HTML .

E dê um Ctrl + f    (Atalho de busca)  e procure por:

]]></b:skin>

E cole o seguite código, ACIMA de ]]></b:skin>

.search{
float: left; /*Posicionamento esquerdo */
font-family: Tahoma, Tahoma; /* Fonte */
}
 .searchbar{
height: 20px;
width: 140px;
color: #FF82AB; /* Cor da fonte */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da parte onde é escrito */
} .searchbut{
background: url('LINK DA IMAGEM'); /* Link da imagem do botão de pesquisar*/
width:50px;
height:50px;
border: 0;
padding:7px;
}

Visualize e salve!

Dúvidas? Ask me em um comentário!