Caixa de Busca Estilo Google com Botão Limpar

Vamos ao Tutorial:

 1º – Acesse o painel do seu blog e clique na Guia Modelo.

2º – Em seguida, clique no Botão Editar HTML.

3º – Depois segure as teclas CTRL+F e procure por:
]]></b:skin> 

4º – E Acima dele cole o seguinte estilo:

#CaixaBuscar {margin:10px;}
#campo {float: left;width: 170px;padding-left: 8px;height: 29px;line-height: 18px;font-family: arial, sans-serif;font-size: 14px;color: #333;background: white;border: solid 1px #D9D9D9;border-top: solid 1px silver;border-right: none;outline: none;}
#campo-apagar {float:left;width:16px;height:29px;line-height:27px;margin-right:15px;padding:0 10px 0 10px;font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;font-size:22px;background: #fff;border:solid 1px #d9d9d9;border-top:solid 1px #c0c0c0;border-left:none;}
#campo-apagar #x {color:#A1B9ED;cursor:pointer;display:none;}
#campo-apagar #x:hover {color:#36c;}
#buscar:active {-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);}
#buscar {cursor:pointer;width:70px;height: 31px;line-height:0;font-size:0;text-indent:-999px;color: transparent;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJDuPOrqHMqNdsBT1lZqx-2BWWKFJx4z3i7VbGbIw0Akhi7jQLV8mW82ojwFOskmbePBrt9fVaCxj3GTCpoN1U25WW5PDrbQmMS1UTmjhJ_Vyhd11W5PY-YfPYRW4rBoZSVJE6h-PORmhc/s1600/ico-search.png) no-repeat #4d90fe center;border: 1px solid #3079ED;-moz-border-radius: 2px;-webkit-border-radius: 2px;}
#buscar:hover {background-color: #4088FD;border: 1px solid #2F5BB7;}
.fclear {clear:both}

5º – Depois segure novamente as teclas CTRL+F e procure por:
</head> 

6º – E Acima dele cole o seguinte código:

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
// if text input campo value is not empty show the &quot;X&quot; button
$(&quot;#campo&quot;).keyup(function() {
$(&quot;#x&quot;).fadeIn();
if ($.trim($(&quot;#campo&quot;).val()) == &quot;&quot;) {
$(&quot;#x&quot;).fadeOut();
}
});
// on click of &quot;X&quot;, campo-apagar input campo value and hide &quot;X&quot;
$(&quot;#x&quot;).click(function() {
$(&quot;#campo&quot;).val(&quot;&quot;);
$(this).hide();
});
});
</script>

7º – Em seguida, clique em Salvar Modelo.

8º – Agora clique na Guia Layout.

9º – Na lateral do blog clique em Adicionar gadget.

10º – Depois selecione o Gadget tipo HTML/Javascript.

11º – Dentro do conteúdo do gadget cole o seguinte código:

<div id="CaixaBuscar">
<form name="SUYB" action="/search" method="get">
<input type="text" id="campo" id="s" name="q"/>
<div id="campo-apagar"><span id="x">x</span></div>
<input id="buscar" type="submit" name="submit" value="Search" /></form>
</div>

12º – Depois clique em Salvar.

Caixa de Busca Desenvolvida por Spice Up Your Blog