Colocando caixa de busca dentro cabeçalho

Vocês já devem ter visto que alguns blogs possui uma caixa de busca no topo, ao lado do cabeçalho do blog. Então hoje irei ensinar a colocar uma caixa de busca no topo do blog.

   Primeiro vá no painel de edição do seu blog, depois vá em Modelo >>> em Editar HTML

Agora você vai usar as teclas de pesquisa Ctrl + F para lhe ajudar a procurar esse Tag no HTML

]]></b:skin>

Quando localizar o Tag, Antes dele você vai acrescentar esse código CSS:

 

/* ----- Busca ----- */

#busca{
width:auto;
height:auto;
z-index:1;
position: absolute;
top: 50px;
left: 660px;
}

 

 

E agora procure esse outro segundo Tag:

 

</header>

 

A baixo dele acrescente esse código:

 

 

<div id='busca'><form action='/search' id='searchform' method='get' style='display:inline;'><input id='search-box' name='q' type='text'/><input id='search-btn' type='submit' value='Buscar'/></form></div>

 

Prontinho, agora

No primeiro código, a parte que eu destaquei em Vermelho: 50px é a distancia em que ficará a caixa de busca no topo.

E a parte que está destacado em cor azul 660px é para deslocar a caixa de busca para esquerda ou para direita.

Lembrando: dependendo da altura e largura do topo do seu template é preciso que você ajuste a localização da caixa de busca:
top: 50px;
left: 660px;

é só clicar em Visualizar e vê se você fez tudo certo, e Salve.