Blogger: Colocar caixa de busca no cabeçalho

   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.

DEMOSTRAÇÃO

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.