Caixa de busca personalizada no cabeçalho

Até que enfim (ou seria "em fim"?) tem tutorial novo, né? Não é muito complicado não, vamos lá:

1. Vá em Design, depois em Editar HTML, dê Ctrl+F e procure por:

<header>

Observação: Se não encontrar o código acima, procure por <div id='header-wrapper'> (o código é outro em diferentes modelos).

2. Cole ACIMA dele o código:

<div id='searchbox'> 
<form action='/search' id='searchthis' method='get'> 
<div class='content'> 
<input class='textfield' name='q' size='24' type='text' value=''/> 
<input class='button' type='submit' value=''/> 
</div> 
</form></div> 


3. Dê Ctrl+F de novo, e procure agora por:

]]></b:skin>

4. Cole ACIMA dele o seguinte código:

#searchbox {
border: 0 none;
-moz-background-inline-policy: continuous;
background: url("http://evelynregly.com/images/nada.gif") no-repeat scroll 0 0 transparent;
display: block;
float: right;
height: 56px;
margin-right: 5px;
margin-top: 100px;
padding-left: 57px; }

#searchbox .textfield {
border: 0 none;
-moz-background-inline-policy: continuous;
background: #fff;
border: 0 none;
float: left;
height: 25px;
margin: 0px 0 0 -23px;
width: 143px; }

#searchbox .button {
background: url("http://img710.imageshack.us/img710/3599/okbymeninanerd.png") no-repeat;
border: 0 none;
cursor: pointer;
float: left;
height: 28px;
margin-left: 7px;
margin-top: 0px;
width: 30px; }

Visualize. Se estiver desalinhado, altere os números que eu destaquei em vermelho até ficar no lugar que você deseja.

Detalhes:

Margin-top: define a margem superior. Quanto maior o número, mais "pra baixo" fica.
Margin-right: define a margem direita. Quanto maior o número, mais "pra esquerda" fica. (Se quiser ir mais "pra direita" é só colocar o número negativo. Ex: margin-top:-15px; )

Você também pode mudar a imagem do "Ok", é só editar uma imagem de tamanho 30x28, assim como a área do texto, de tamanho 143x28.

Beijos.

38 comentários:

૮α૨ѳℓ disse...

Adorei *o* Não tem jeito de colocar título?

૮α૨ѳℓ disse...

Ei, como faz para ela funcionar??????

Amanda disse...

Olá, adorei o tuto!
Seus tutoriais sempre são os melhores *-*
Beijos!

it girls disse...

Flor adorei o tutorial, achei algumas coisas sobre isso, mas nenhum deu certo, vou tentar esse agora ^^

www.profanofeminino.com

Andressa disse...

Adoro seus tutos!

Beijos,
http://www.segredodasgarotas-blog.blogspot.com/

Babi disse...

Nossa muiiiito bom Andeza
Mas só não consegui colocar a caixinha dentro do cabeçalho tipo igual a sua.
Ficou lá em cima do cabeçalho me ajuda flor?

http://barbarellacravoecanela.blogspot.com/

Andreza disse...

@Babi - Oi Babi! Acho que você esqueceu de colocar o segundo código :D

Luiza Nichetti disse...

Eii Andreza, amei o blog de paixão e já to seguindo.

Babi disse...

Eu coloquei mas ainda assim não deu.

Princess Teens * disse...

Adorei o tutorial, bem explicadinho (:

Beijos, Juliana.
Princess Teens

Sabrina Lobelle disse...

Desafio pra você lá no meu blog :

http://sabrinaapenasumaaprendiz.blogspot.com/2011/05/desafio.html

*-*

Suélen Breier disse...

Oii
Adorei seu blog! Muito lindo e com dicas super bacanas *.*
Já estou seguindo.

Se quiser conhecer o meu
http://limao-e-mel.blogspot.com/
Beijão

Isac disse...

nhaw ,adorei o tuto *-*

Liliane Duarte. disse...

Oi o RG reabriu com um visual totalmente novo, comentá oque achou? Bjs

Andy Reis (Elcimar) disse...

Hooy... O blog acabou de estrear finalmente a sua página de selos! E você já tem um selo lá.. Passe e pegue! Beijoos..

http://acessopermitidoblog.blogspot.com/p/selos.html

Sofia (: disse...

obrigada por segui meu blog, linda *-*
eu sigo aqui faz tempo, e amo o Menina Nerd.
http://ontuned.blogspot.com/

Nicole Medeiros disse...

nossa, vlw peloo tutorial Andreza!
publiquei seu blog em uma post, olhja e comenta, Ok?
beeeijos

www.continuo-apenas.blogspot.com

CandyReis disse...

Já linkei também :D

Biibizinha disse...

Não consigo colocar, esse tutorial é para o Blogger Clássico ou para o Blogger Novo?
Me ajuda !

www.mychic-planet.blogspot.com

Teen Fyn; disse...

Aqui deu certo, mas teve um problema. Eu puis mais não apareceu uma parte do cabeçalho
Me ajuda D:

ARTENIX disse...

Esse codigo empurra o titulo e descrição do meu blog para baixo!!! tem como concertar isso?

Tadeu Barbosa disse...
Este comentário foi removido pelo autor.
Mariana disse...

eu não consegui alinhar :S

Henrique Werlang disse...

Tem como por um texto na barra de pesquisa

daniquintana disse...

Oi Andreza, não consegui me entender com a caixa rs

Dá uma olhada no meu blog aqui: http://thatsb-girl.blogspot.com

Não consigo mecher naquela parte cinza perto da caixa, isso é coisa do meu template?

Clara ;* disse...

Consegui colocar a caixinha de pesquisa, tá, até aí tudo bem. Mas eu não consigo personalizá-la. Af, eu não consigo fazer nada, nada dá certo no meu blog! DD:

www.clara-rodriguez.blogspot.com

Andreza disse...

@Clara - Vc queria personalizar o que exatamente? Se for as imagens, é só mudar a url da imagem, ok? rs (:

Gabi disse...

ficou certinho,mas não dá para pesquisar

Henrique Werlang disse...

Tem como por um texto na caixa de pesquisa ? Tipo: Pesquisar em todo o site...

Andreza disse...

@Gabi - Muito estranho isso. No meu outro blog funcionou perfeitamente >< Mas teve um blog que ficou com o mesmo problema que o seu :/

@Henrique Werlang - Acho que tem como sim (já vi sites que têm), só que eu não sei como faz. Sorry :/

Ana Lu Nagib disse...

O meu ficou assim:
Fica a imagem e tudo, só que ai quando tá em cima docabeçalho, a parte do cabeçalho em que ela está fica invisel, ou seja aparecendo só o background, e não dá para clicar nela para digitar /;
Me ajuda?

Beijos e agradeço desde já^^
http://sermenina-blog.blogspot.com

Thaiis disse...

Oii

No meu n deu certo
o que pode ter dado errado??
Bjuus

jackie Zanini disse...

adorei ja estou usando (:

Marilia Santos disse...

Olá, eu quero muito usar só que no cabeçalho no meu fica muito ruim. Tem um jeito de colocar na barra lateral?

http://asesmaltados.blogspot.com/

Mel Cardoso disse...

Oi flor, eu fiz isso ficou perfeito, até ai tudo bem, mas tem um pequeno grande problema, ela não funciona =/ Pode me ajudar ?

TeTe disse...
Este comentário foi removido pelo autor.
TeTe disse...

Ta bem explicadinho!! Mais além de não funcionar o meu "apaga" uma parte do cabeçalho, me ajuda??

Yasmin Souza De S. M. Henriques disse...

Agora precisei e usei! Amo o Menina Nerd Andreza, seus tutoriais ajudam muito! Beijos Yasmin *---*