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.

Comentários

  1. não ficou bem em cima, ficou mais p/ direita e em cima pegando texto de guias e mudei a áreas sublinhadas mais nem se mexeu.

    ResponderExcluir
    Respostas
    1. De acordo com alguns templates do Blogger, propriedades são diferentes! Porem, estarei criando outro código para que possamos conseguir solucionar esse problema.

      Excluir

Postar um comentário

    Comentários que contenham em seu conteúdo seguintes temas: pornografia, palavrões, palavras ofensivas ou preconceituosas, spam, todas palavras em Caps Lock, não serão aceitos.