Tutorial: Como por barra de pesquisa personalizada no blog?

Hoje eu trouxe pra vocês um tutorial de personalização pro blog, o código eu não lembro onde peguei (pois é oque estou usando nesse template, então peguei do meu próprio blog pra postar aqui) , mas mesmo assim tá valendo não é ? (kkkk)

Vamos começar, primeiro vá em layout > adicionar um Gadget > Html/JavaScript  copie o código abaixo e cole na caixa do gadget

<style type="text/css">

<!--

#barra-busca {

width: LARGURADACAIXADEPESQUISApx;

height: ALTURADACAIXADEPESQUISApx;

float:right;

margin-top:0px;

margin-right:10px;

}

#form-busca {

background: none;

}

#form-busca #sprocura{

height: 28px;

width: 240px;

margin-top: 8px;

margin-left: 8px;

color: #CORDAFONTEDACAIXA;

border: 2px solid #CORDABORDADACAIXA;

float: left;

padding:0px;

background-color: #CORDOFUNDODACAIXA;

}

#bt-busca {

height: ALTURADO'OK'px;

width: LARGURADO'OK'px;

background: url(LINKDO'OK') no-repeat;

border: none;

margin-top: 7px;

float: right;

cursor: pointer;

margin-right: 10px;

}

-->

</style>

<div id="barra-busca">

<form id="form-busca" method=get action="SUAURL/search"><input id="sprocura" type=text name=q maxlength=255 value="" />

<input name=btng type=submit id="bt-busca" value="" />

<input type="hidden" name="domains" value="SUAURL" /><input type="hidden" name="sitesearch" value="SUAURL" />

</form></div>

Mude TODOS os locais em caixa alta ou então dará erro, para encontrar cores vá numa > tabela hexadecimal <

O 'ok' deve ter dimensões de  25x25 pra ficar certinho com a caixa, você pode criar um ou mesmo pegar do google, caso criem um recomendo o site Imgur para a hospedagem da imagem.

Depois de tudo mudado, basta salvar e visualizar seu blog.