Caixa de pesquisa estilo google

Olá galera hoje vou ensinar colocar uma caixa de pesquisa, é muito importante para que o leitor possa achar com mais facilidades o artigo que deseja, além de deixar mais elegante seu blog, barra de pesquisa tem um visual mais moderno e minimalista, com cantos arredondado com efeitos jquery com o mesmo estilo da caixa da Google o maior site de busca do mundo.

Antes do tutorial peço ajuda ao blog que é novo e toda ajuda são bem vindo, seja como divulgação comentário, curtidas no facebook, troca de banner e etc... de qualquer jeito retribuiremos ajuda dada.

Vamos ao tutorial:

1º- Clique em Editar HTML e expandir modelos de widgets.

2º- Aperte Ctrl + F e procure por ]]></b:skin>

E cole o código abaixo antes.

/*Start Css For Google Style Search Box*/

/* div container containing the form */
#searchContainer {
margin:20px;
}

/* Style the search input field. */
#field {
float:left;

width:200px;

 3º- em seguida procure por </head> e cole antes o código abaixo.

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>

<script type='text/javascript'>
$().ready(function() {
// if text input field value is not empty show the &quot;X&quot; button
$(&quot;#field&quot;).keyup(function() {
$(&quot;#x&quot;).fadeIn();
if ($.trim($(&quot;#field&quot;).val()) == &quot;&quot;) {
$(&quot;#x&quot;).fadeOut();
}
});
// on click of &quot;X&quot;, delete input field value and hide &quot;X&quot;
$(&quot;#x&quot;).click(function() {
$(&quot;#field&quot;).val(&quot;&quot;);
$(this).hide();
});
});
</script>

 Salve seu template agora vamos colocar o Html/Javascript

4º- Vá em layout >>  adicionar widget >> HTML/javaScript e cole o código abaixo onde deseja que apareça a caixa.

<div id="searchContainer">
<form name="SUYB" action="/search" method="get">
<input type="text" id="field" id="s" name="q"/>
<div id="delete"><span id="x">x</span></div>
<input type="submit" name="submit" id="submit" value="Search" />
</form>
</div>

Para ajustar a largura procure width:200px; no 2º passo e substitua o 200 pelo tamanho que deseja.

 Agora só salvar