Blogger: Colocar caixa de busca no cabeçalho

http://4.bp.blogspot.com/-qkFyZuCQgDk/T9qLbvie8rI/AAAAAAAABFc/hUxyEdYhCEo/s1600/image%5B7%5D.png
   Olá caros leitores blogueiros e blogueiras, hoje estamos aqui com mais um tutorial sobre o Blogger, desta vez aprendaremos a como colocar uma barra de busca no cabeçalho. Um tutorial muito simples e prático de se efetuar.

Obs.: 

   Estaremos mexendo no HTML do seu blog, então eu recomendo que você faça um backup do seu template e/ou teste em um blog de testes.

1. Adicionando o estilo

  • Acesse o Blogger e faça seu login;
  • Clique em Mais Opções;
  • Dirija-se a página Modelo;
  • Clique agora em Editar HTML;
  • Procure pela seguinte tag:

/* Header

  • E adicione acima o seguinte código:

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

Obs.: Ajuste as áreas sublinhadas e destacadas de acordo com o ângulo da barra de onde irá ficar no cabeçalho.


Salve, e pronto. Agora siga os próximos passos.


2. Adicionando a barra de busca


Agora clique novamente em Editar HTML, e clique em Expandir Modelos Widgets.

Agora procure por:
 
<!--Show the image only-->
<div id='header-inner'>

E adicione abaixo o seguinte código:

<div id='busca'>
<form action='/search' id='searchthis' method='get' style='margin:0;padding:0;display:inline;'><input id='search-box' name='q' onblur='clickrecall(this,&apos;Pesquisar&apos;)' onclick='clickclear(this, &apos; &apos;)' size='20' style='color: #000;' type='text' value=''/> <input id='search-btn' type='submit' value='Buscar'/></form> </div>

Salve, e pronto.