Tutorial: Gadget de pesquisa

A pedido da Caah do blog [www] Vou postar aqui como colocar o gadget de pesquisa que tem aqui no  Portfólio. Ah! Sem esquecer de agradecer a Gizaa *--' 

Design - Adicionar um gadget - e escolha a opção Html/JavaScript e cole o código abaixo nele.

<div class='search'>
<form action='/search' method='get'>
<fieldset><input name='q' placeholder='pesquize aqui' type='text' value=''/><button type='submit'>GO</button>
</fieldset>
</form>

<style>

/**** RESET ****/
* {
border: 0;
outline: 0;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
margin: 0;
padding: 0;
font-weight: 400;
}
/**** SEARCH ****/
.search {
width:90%;
margin-left:9px;
margin-top:15px;
margin-bottom:-18px;
display:inline-block;
zoom:1;
*display:inline;
border:solid 1px #ddd;
padding:3px 5px;
border-radius:2em;
box-shadow:0 1px 0px rgba(0,0,0,.1);
background: #f1f1f1;
background:-webkit-gradient(linear, left top, left bottom,from(#fff),to(#ededed));
background:-moz-linear-gradient(top, #fff, #ededed);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed');
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed')
}
/**** BOTAO ****/
.search button {
border:0 !important;
float:right;
background:#f9b;
cursor:pointer;
color:#fff;
padding:0 5px 2px 5px;
height:26px;margin-left:-20px;
border-radius:25px;
box-shadow:0 0 2px #aaa;
background:-webkit-gradient(linear, left top, left bottom, from(#e2c7a4), to(#876e59));
background:-moz-linear-gradient(top, #f9b, #ff1499);
text-shadow:0 -1px #aaa
}
/**** BOTAO HOVER ****/
.search button:hover {
background:#ff1490;
background:-webkit-gradient(linear, left top, left bottom, from(#ff1490), to(#f9b));
background:-moz-linear-gradient(top, #ff1490, #f9b)
}
/**** CAIXA DE TEXTO ****/
.search input {
border:0 !important;
float:left;
padding:6px 10px;
width:78%;
border-radius:15px;
background:#fff;
box-shadow:inset 0 1px 3px #ccc;
text-align:center;
cursor:text;
color:#777;
font:italic 12px georgia;
text-shadow:0 1px #fff
}
</style>

</div>
<div class='clear'>
</div>

Só isso! haha. Se quiser troque o que marquei de vermelho pelo que quiser lembrando que o botão de "ir/pesquisar"
Claro que pode alterar os outros valores, mas cuidado para não apagar algo que faça com que o código não funcione que são: " ' < > </> # ; % ( ) { }

Ahh! Obrigada para quem votou aqui na enquete e deu sua opinião, é muito importante para mim *-*

 Beijos :*