Colocar Caixa de Busca ao lado do cabeçalho do blog

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.

Pra colocar a caixa de busca vamos precisar acrescentar alguns códigos no HTM do Blog.

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

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 é só clicar em Visualizar e vê se você fez tudo certo, e Salve.

Ajuste a localização da Caixa de busca

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;