Colocando caixa de pesquisa personalizada no seu blog

|
Tumblr_lslocnlaww1qh92pqo1_500_large_large
Sua caixa de pesquisa ficará como a da imagem abaixo, sem mais enrolação, vamos ao tutorial!

1- Vá em Painel, Design, Elementos da página e adicione um gadget Html/JavaScript e cole o código a seguir sem fazer NENHUMA modificação:

<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>
2- Vá em Painel, Design,  Editar HTML, aperte CTRL+F, procure por e ]]></b:skin> cole ACIMA fazendo as alterações desejadas :
.search{
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
font-family: Tahoma, Tahoma; /* Fonte */
}
.searchbar{
height: 20px;
width: 140px;
color: #FF82AB; /* Cor da fonte  */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da parte onde escrevemos */
}
.searchbut{
background: url('http://i39.tinypic.com/25ezh8z.png'); /* Link da imagem do botão de pesquisar*/
width:30px;
height:30px;
border: 0;
padding:7px;
}

Bem fácil né? Espero que vocês tenham gostado. Qualquer duvida é só falar.

86 comentários:

Barbara disse...

Ai que máximo!
eu sempre tento fazer uma caixinha personalizada e não consigo :s
vou ver se com esse tuto dá certo (:

Bjs
http://blogportalteen.blogspot.com

Bia disse...

amey,mas naum consigui,adoro o blog,bejus!
http://blog-da-byaa.blogspot.com

Ana disse...

concurso rolando no meu blog!

participem,todas convidadas!

http://coisinhasparabloggarotas.blogspot.com/2011/11/1-concurso.html

beijos!

Bruna disse...

Super fácil e útil *-*
http://just-smiles2.blogspot.com

Juh Demos // My World disse...

- Olá , bom vim avisar que seu blog é lindo hehe , e o lay ta demais sério mesmo *.*
Bom estou seguindo aqui , e amando , já que to aqui vou aproveitar pra comentar sobre seu poste , é maio chato só avisar que está seguindo pelo menos eu não gosto disso...
>> ADOREIIII ESSE TUTORIAL
Enfim , parabéns pelo seu blog e muito sucesso continue assim , e te convisdo a visitar o My world garanto que será muito bem vinda flor *.*

Bejoca da Juh , Majú e Jú :**
http://blogjulianamyworld.blogspot.com

Lucas de Oliveira Assunção disse...

Nossa muito fácil, to sem tempo pra fazer isso agora, amanhã vou voltar para copiar os códigos e fazer no meu blog !

Seguindo ! Lucas -

Segue de volta ? http://crazyteen-ct.blogspot.com/

Jeff Bolton disse...

Mto bom o tutorial. ^^

Ecleticus

Gabriela Möeller Assis disse...

oi tudo bem ? escolha sua favorite e vote, pra ela ganhar no concurso beijos :*

http://iwantonlyou.blogspot.com/2011/11/looks-e-votacao.html

Luly disse...

Oi!
Meu nome é Luly, e eu não faço a mínima ideias de como fazer layouts. Acho que seu blog não oferece encomendas, mas será que você poderia abrir uma pequena exceção?
Bom, aguardo sua resposta, e para deixar claro, o layout seria para uma amiga minha.
Se quiser responder a minha pergunta, por favor, entre em contato comigo pelo meu msn: writewhilelove@hotmail.com
Desde já, agradeço!
Beijos, Luly
< www.ls2jb.blogspot.com > iLuly.com
< www.writewhilelove.blogspot.com > WWL

Caio Mota disse...

Participem do sorteio que está rolando no blog: http://www.gravidadeartificial.com/2011/11/sorteio-com-color-time.html

Chassy Cher disse...

Simples e o resultado é maravilhoso.
Tutorial perfeito!

http://blog-sweetpoison.blogspot.com/

Nathalia Guerra disse...

ameiiii o seu blog e estou seguindo !!!
me segue tambem ???
http://louca-atitude.blogspot.com

Nathalia Guerra disse...

esse tuto me ajudou muito !!!!
oficialmente o Louca Atitude esta fazendo seu 1º concurso para ajudar aos blogs que são leitores daqui e pros que ainda não são o nome do concurso será "atitude up”. ficaremos muito felizes se o seu blog participa-se entao passa la ???
http://louca-atitude.blogspot.com/2011/12/concurso-atitude-up.html#comment-form

obrigada !!!

Nayara Rockeira s2 disse...

Oiie Teeem Concursoo No meu Blog
Blog da Naah s2
Concurso de melhor design
Venha participar você também
http://blog-da-naah-s2.blogspot.com/2011/12/concurso-melhor-design_09.html

Beijinhos
Nayara

Paloma Morais disse...

Eu adorei o tutorial, vai servir pra mim! Fiz um novo layout, depois passa lá?

Beijos, dreaams.tk

Ҩ. luana oliveira ! disse...

Usei a tutorial, quando eu criar a pagina de creditos,coloco voces lá ! beijos & FELIZ NATAL ;*

Carol Vasconcelos disse...

Amei, estou usando no meu blog, e os creditos estão la

depois-da-primavera.blogspot.com

Carol Oliveira disse...

Super simples e fácil de entender!

Vou colocar no meu blog, e assim que usar, coloco os créditos também, ok?

Obrigada por ajudarem a gente :)

muggle-world.blogspot.com

Forever Meliebers disse...

funcionou muito bem,obrigada.

Amanda ♡ disse...

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
oq eu tava procuraandooooooooooooooo
OBGG!!!!!
Ameeeeeeeeeeeeeeeeeeeeeeeeeeei

http://blog-moderninho.blogspot.com

Luísa disse...

Obrigado,me ajudou muito!

Beijinhos da Luísa>>>Lufashionteen.blogspot.com

Mariana disse...

Amei, coloquei no proximo layout meu blog!

www.amigaajuda.blogspot.com

Micaela :* disse...

to usando! tava precisando!!
http://sonhos-na-adolescencia.blogspot.com/

Pucca Cherry disse...

Adorei esse tutorial!
me ajudou mt. obg *-*
Aqui está mt lindo !
http://innocenceteen.blogspot.com/

Jady disse...

Amei o tutorial! Ja estou seguindo seu blog! E coloquei os créditos pela ajuda!

>> http://teenagesweetpoison.blogspot.com/

Fc disse...

Caramba essa eu vou usar no layout que eu tô montando posso te pedir um tuto??
Se sim me diz como personalizar os comentários bjúa fofa

Tudo por você. disse...

Amei! E vou usar! :)

http://euescolhojesus.blogspot.com/

Thalia A. disse...

Brigada, tava mesmo precisando de uma e essa é linda xoxxo

http://makedressesanddreams.blogspot.com

Mistchie Morgan disse...

Ótimo tutorial,bem fácil de fazer.Vou por os créditos quando terminar de fazer o meu Layout! :3
meudocepandemonio.blogspot.com

Yasmin @ Mih disse...

Oiee aceita afiliação????

siga o meu blog naum conseguir siguir o teu pq deu pane no meu pc este comentarioooo deve saii meio errrado maiis vcccccccccccccc achuuuuu qui vayyiuiu entendyye!!! enttra noo meu blogg e comentaaaa se eee tuhhuuh qé afiiiliaçãaao...

http://garotafashionstar.blogspot.com/

Hellen Rovesse disse...

ameeeeeeeeei
alltheglamour.blogspot.com

Amanda Cerqueira disse...

Eu usei.
s2cinderella.blogspot.com

Maísa Gabriela disse...

Pegueeeeeeei Liinda
http://www.replaygirl.blogspot.com
Obrigada por me ajudar tanto!

Liah disse...

Oii , amei teu blog, amei a dica , vou passar aqui todos os dias . BJOS

aqui meu blog caso queira visitar : http://blogbarbiedoll.blogspot.com.br/

Tamiris Fiares disse...

Esse tuto é dmais

http://cherry-pumped.blogspot.com

Millene Raquel disse...

tudo o que eu precisava! usaando! beejs

http://fashionmelooks2012.blogspot.com.br/

euretalhei disse...

Meu blog ficou linnndo. Adorei a dica, obrigada.
Olha o resultado http://euretalhei.blogspot.com.br/

Quem curte customização e design, confere l[a também!

Beijos

Caroline disse...

Vou tentar colocar no meu blog..
Ameeeeeeeei o seuu!
http://soparaasgarotas1.blogspot.com.br

Stephani disse...

ameeei o tuto!
tava mesmo precisando...

besos~>stephanirocha.blogspot.com.br

Rhamas disse...

Utilizei o código, e fiz algumas modificações (coloq cred /**/)
muito legal seu blog! parabens!!!
http://entreisemsaber.blogspot.com

Maiary Rodrigues disse...

Eu fiz e ficou bem legal!
Vocês sabem como colocar essa caixa de busca na barra do menu?
Beijos

Isabela disse...

Adorei, já puis no meu blog :) hehe
leitora nova aqui, amei seu blog *-*

Aqui tá o meu se alguem quiser visitar: http://overdose-teen.blogspot.com.br/

Rubensgpl disse...

Até que enfim eu consegui, VALEU !!!!!!!!!!!!
http://estudiotorrent.blogspot.com.br/

Nathalia disse...

Muuuuuiiiiitooo legal!
estou usando!

Adriana Campezato disse...

o ÚNICO tutorial que me ajudou >< haha tava procurando a tempos!! Obrigada ;) beijos!!

http://crazy-for-candy.blogspot.com.br/

Nathynhaaah disse...

Amei o tuto, ajudou d+! Bjks.
http://charmeteen-oficial.blogspot.com

Fernanda leticia disse...

Adorei , muito Facil!

Blog: www.blogajudinha.blogspot.com.br

-Vanessa Pinheiro disse...

Fica muito liiindo <3
Coloquei no meu blog, ficou cute (;
Seguindo aqui flor... se puder retribuir :~)
~ letrasdebatom.blogspot.com.br

Diego Guerra disse...

Legal garota, deem uma passada no meu.
Abraço!

http://karthongamer.blogspot.com.br/

Lorie Estevam disse...

Ameeeeeeeeeeeeeeeeeei muito!!!
peguei, tá!? dá uma olhadinha
http://fearlesslorie.blogspot.com.br/

@Looh_Toledo disse...

Adoreei, estou usando, seu blog e tão perfeito *--*
aah vou criar uma pagina para dar s creditos aos blogs dos quais usei algo, o seu é um deles *-*

Jéssica Alves disse...

Maravilhoso!!

muitissimo obrigada!! :D

http://somais5minutoos.blogspot.com.br/

Galera Asanhada disse...

ameii useii

Jehn Reisss disse...

Adorei, apliquei no meu site *----*
Creditarei *----*

FRANCISCO SILVA disse...

Querida bom dia, eu gostei do seu tulturial, muito bem explicado. só que estou com problema, estou á um tempinho tentado construir meu meu blog e praticamente me perdi, se for possível tem como me ajudar a construir? gostaria de aprender um pouco sobre html. http://anjoazul2012.blogspot.com/ e-mail chicoty63@gmail.com Desde já grato

T.Almeida disse...

ficou muitoo bom!!!!!!
coloquei em um layout para download.:D

Lindas Mentirosas disse...

Me ajuda pf ñ consegui ><


theesiims3.blogspot.com.br

show filmes ( ANDERSON ) disse...

obrigado
http://wwwshowfilmes.blogspot.com.br/

Daííy disse...

Bem legal *-----*

Taay Aguiar disse...

Ameeeeeei o tutu >< muito obg

Lost in Paradise disse...

Adorei o tutorial, super bem explicado!!
Seu blog é lindo!!
Bjs.

lost-inparadise1.blogspot.com.br

OTTIDevelopers disse...

http://ottidesigncorporations.blogspot.com.br/

Louise Biolchini disse...

Que legal! Obrigda!

Laura disse...

Usei e rebloguei , claro que dando os devidos créditos e seguindo seu blog ! Bjoos !

Marcicleide disse...

Muito legal esse tutorial.

Seguindo segue de volta, por favor!
blog-da-marci.blogspot.com.br

Vote no Blog da Marci na enquete deste blog(cupcakeofchocolate.blogspot.com.br) por favor.

Rebeca disse...

ADOREEEI, BOTEI O TUTORIAL DO MEU BLOG ;C
BJOOOS' http://dama--de--ferro.blogspot.com.br/

Caroline disse...

Flor, esse blog te plagiou: http://depoimentoseperfis-prontos.blogspot.com.br/2012/05/caixa-de-pesquisa-personalizada-no-blog.html

Jéssica Belisário disse...

Ameiii.. me ajudou ! Estou construindo o meu Blogger (:

Vanessa disse...

Ótimo tutorial,tô usando e já creditei :3
MEUDOCEPANDEMONIO.BLOGSPOT.COM.BR

Daniela Carvalho disse...

AMO SEUS TUTORIAIS!!!! O UNICO BLOG QUE REALMENTE ME AJUDOU!!! LINDA PARABEEEEENS

Anne Myrelle e Wanneska Nogueira disse...

Muito obrigada, deu super certo! *--*
www.garotapersonalizada.blogspot.com

Cris Luna disse...

Adorei o tutorial,super facil né?

minhas-confissoes-2012.blogspot.com

Yara Fernandes disse...

Nossa ficou perfeito no meu blog... Muito obg pelo tutu (: http://bonequinhascarinhosas.blogspot.com.br/

visita?!

Yara Fernandes disse...

Eu peguei este post para postar no meu blog mais eu vou dar créditos e também não vou fazer tudo identico...

http://bonequinhascarinhosas.blogspot.com.br/

Maria Carol disse...

Vlw, tive que ir até a pagina 5 do google para encontrar um tutorial descente. bjs

http://mcmodelo.blogspot.com.br/

Kiih Amane disse...

Muito bonito *-*
Coloquei no blog \o/

Ca Camargo disse...

Mto obrigada amore amei como fiko no meu blog vlw ae

Carolina e Camila disse...

lindo usei no meu blog d+
http://cupcakescoloridoscc.blogspot.com.br/

OTTIDevelopers disse...

http://ottidesigncorporations.blogspot.com.br/

Ana Paula Y Castro disse...

adooorei

samara shelda disse...

no meu blog não tem ]]>

Caroliina Pereira disse...

Perfeito vou usar

Moleka Atitude disse...

ameiii me ajudou mt :33

meninas visitem : http://molekaautentica.blogspot.com.br/

Nicole CS disse...

Muito obg me ajudou mesmo ótimo post viu *-* abraços...
http://girlslinkedoficiall.blogspot.com.br/

Tatiana Pimenta disse...

não deu certo no meu blog

Viviany Teodoro disse...

Eu consegui com seu tutorial <3 nem acredito num trem desse! Beijos.
vivianyteodoro.blogspot.com