Image Map

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.

85 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 Pires 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

Juliana Demos 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

Anônimo 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/

Unknown disse...

Mto bom o tutorial. ^^

Ecleticus

Anônimo 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

Unknown disse...

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

Mrs. California disse...

Simples e o resultado é maravilhoso.
Tutorial perfeito!

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

Nath disse...

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

Nath 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 Felix 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

Anônimo disse...

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

Beijos, dreaams.tk

LUANA ANDRADE 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

demi is our queen, bitches. disse...

funcionou muito bem,obrigada.

Anônimo 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 Duarte disse...

Amei, coloquei no proximo layout meu blog!

www.amigaajuda.blogspot.com

Anônimo disse...

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

Anônimo disse...

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

Jady K. disse...

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

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

Gaby Flor Gloss 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

EEJ disse...

Amei! E vou usar! :)

http://euescolhojesus.blogspot.com/

Unknown disse...

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

http://makedressesanddreams.blogspot.com

VANESSA 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 Ribeiro 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

Anônimo 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/

Unknown disse...

Esse tuto é dmais

http://cherry-pumped.blogspot.com

Anônimo disse...

tudo o que eu precisava! usaando! beejs

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

Anônimo 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

Carol Azevedo disse...

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

Anônimo 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 Costa 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/

NEO disse...

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

Nathalia disse...

Muuuuuiiiiitooo legal!
estou usando!

Adriana 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

Unknown disse...

Adorei , muito Facil!

Blog: www.blogajudinha.blogspot.com.br

BLOGS // Vaah disse...

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

Unknown 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/

Unknown 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/

Unknown disse...

ameii useii

Jennifer Reis disse...

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

Anônimo 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

Tiago Almeida disse...

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

Mundo Dos Sims disse...

Me ajuda pf ñ consegui ><


theesiims3.blogspot.com.br

show filmes ( ANDERSON ) disse...

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

✿ Daííy disse...

Bem legal *-----*

Unknown disse...

Ameeeeeei o tutu >< muito obg

Anônimo disse...

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

lost-inparadise1.blogspot.com.br

Anônimo disse...

Que legal! Obrigda!

Laura disse...

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

Marcy Moraes 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

Unknown disse...

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

Anônimo disse...

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

Anônimo disse...

Adorei o tutorial,super facil né?

minhas-confissoes-2012.blogspot.com

Yara disse...

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

visita?!

Yara 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 disse...

Muito bonito *-*
Coloquei no blog \o/

mila disse...

Mto obrigada amore amei como fiko no meu blog vlw ae

Unknown disse...

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

OTTIDevelopers disse...

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

Nostro rancho disse...

adooorei

Samara Shelda disse...
Este comentário foi removido pelo autor.
Unknown disse...

Perfeito vou usar

Unknown disse...

ameiii me ajudou mt :33

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

Unknown disse...

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

Unknown disse...

não deu certo no meu blog

Viviany disse...

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