domingo, 8 de janeiro de 2012

Colocando caixa de pesquisa no header de seu blogger


Atendendo a pedidos, irei ensiná-los como colocar uma caixa de busca/pesquisa no cabeçalho do blog. Quero lembrar que a aplicação desta técnica pode não funcionar em todos os templates.

Antes de começar, faça um backup do seu template por precaução e aplique agambiarra técnica primeiro em um blog de testes e só depois em seu blog principal.
Entre no painel do Blogger e na aba layout, clique em editar html. Marque a caixaexpandir modelos de widgets e procure por /* ----- HEADER ----- */ ou#header-wrapper ( que é onde começa o código do cabeçalho).
Copie o código abaixo e cole ANTES do código do cabeçalho (header).
/* ----- Busca ----- */
#busca{
width:auto;
height:auto;
z-index:1;
position: absolute;
top: 50px;
left: 660px;
}

Procure agora por <div id='header-wrapper'>e cole logo abaixo o código de busca:
<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;Pesquisar&apos;)' size='20' style='color: #999;' type='text' value='Pesquisar '/> <input id='search-btn' type='submit' value='Buscar'/></form> </div>
Caso você queira colocar uma caixa de busca do Google Adsense, substitua a parte em vermelho do código acima pelo código fornecido pelo AdSense.
<div id='busca'>CÓDIGO DO ADSENSE</div>
Ajuste a posição da caixa de busca, alterando os valores top e left do 1° código.
Vá visualizando o template até ficar legal e só depois clique em salvar modelo.

4 comentários:

  1. Olá, o meus blog não tem <-div id='header-wrapper'>

    em vez de wrapper tem inner, e ai como q eu faço??

    ResponderExcluir
    Respostas
    1. Ola Diego, Bem primeiro verifique se você marcou a Caixinha "expandir modelos de widgets" depois disso procure novamente, se mesmo assim nao der certo, faça um backup do seu template e tente com inner, mais lembre-se Faça o Backup.

      Excluir
  2. Este comentário foi removido pelo autor.

    ResponderExcluir
  3. isso ai foi copiado de um site que eu ví aki

    ResponderExcluir

Translate