caixa de busca personalizada blogger com css

Uma caixa de busca com css.

Entre no HTML do template e procure por: ]]></b:skin> 
Cole ANTES dessa linha, o seguinte código:

/* BUSCA
----------------------------------------------- */
#search{
border:1px solid #ccc; 
-moz-border-radius:6px;
-webkit-border-radius:6px;
-goog-ms-border-radius:6px;
height:28px;
padding:0;
background:#efefef; 
text-align:right;
}
#search input{border:0; background:none; color:#575757}
#s{width:230px; padding:4px; margin:2px 0 0 0; background:none}
#topsearch #search{margin-top:15px}
#topsearch #s{width:200px}

Vá em “design”e "elementos da página" e cole este outro código, dentro do gadget HTML/Javascript

<div id='search'>
<form expr:action='data:blog.homepageurl + &quot;search&quot;' id='searchform' method='get' name='searchform'>
<input class="keyword" id="s" name="q" type="text" value="" />
<input src="http://lh6.ggpht.com/_mcq01yDJ2uY/TSg-kE6t5KI/AAAAAAAAELE/fg2rTdoATqg/search.gif" style="border:0; vertical-align: top;" type="image" />
</form>
</div>

Como isto é uma caixa feita com CSS, é possível mudar as cores da borda e do fundo, alterando os valores em amarelo. Veja uma tabela de cores. 
Para ajustar a largura da caixa, altere os valores em width.