Caixa de busca personalizada

11 de jan. de 2013

By: Melina Souza
Alguém aí concorda comigo que caixas de pesquisa são de extrema necessidade em um blog? Bom, acho que todos concordam, mas vamos combinar que a caixa de busca do blogger não favorece muito um layout, já que é bem feinha né rsrs

Há bastante tempo vi um tutorial de como fazer uma barra de busca no blog da Gizaa, e acabei adaptando o estilo que ela usou no tutorial ao código da barra que eu já usava, e deu nisso que eu vou ensinar! rs


Bem, é super simples, antes de começar a mexer com html, vá em Layout > Adicionar um gadget > Escolha o de HTML/JavaScript. Dentro desse gadget cole:
<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="GO" />
</form>
Você pode trocar a palavra Go pela palavra que desejar, é ela que fica dentro do botão pra pesquisa.

Agora entre no seu HTML (Modelo > Editar HTML) e procure (F3) por }]]></b:skin> e acima dele colar o seguinte código:
.search{ /* Geral */
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
margin-left: 0px;
margin-top: 6px; /* Margem superior, edite se precisar, - sobe e + desce  */
font-family: Tahoma, Tahoma; /* Fonte da letra que será escrita quando procurarmos por algo */
}
.searchbar{ /* Barrinha onde se digita */
height: 18px; /* Altura da barrinha */
width: 230px; /* Largura da barrinha */
margin-left:0px;
margin-top:-45px; /* Margem superior, edite se precisar, - sobe e + desce  */
margin-bottom:-18px; /* Margem inferior, edite se precisar, - sobe e + desce */
color: #ccc; /* Cor da fonte da letra que será escrita quando procurarmos por algo */
border:solid 1px #ddd; /* Borda */
padding:3px 5px;
border-radius:2em; /* Bordas Arredondadas */
box-shadow:0 1px 0px rgba(0,0,0,.1); /* Sombra interna */
background: #fff; /* Cor do fundo */
background:-webkit-gradient(linear, left top, left bottom,from(#fff),to(#ededed));
background:-moz-linear-gradient(top, #fff, #ededed);
filter:progidXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed');
-ms-filter:progidXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed')
}
.searchbut{ /* Botão */
border:0 !important;
float: right;
background: #D9D9D9; /* Cor do fundo do botão */
cursor: pointer;
color:#fff; /* Cor do texto */
padding:0 5px 2px 5px;
height:26px; /* Altura do botão */
margin-top: -20px; /* Margem superior, edite se precisar, - sobe e + desce  */
margin-right: -35px; /* Margem direita, edite se precisar */
border-radius:25px;  /* Bordas Arredondadas */
box-shadow:0 0 2px #aaa; /* Sombra */
text-shadow:0 -1px #aaa; /* Sombra no texto Go */
}
.searchbut:hover { /* Botão Hover */
background:#F3A7C2; /* Cor do fundo do botão hover */
}
Visualize e se estiver tudo certo salve! 
Em breve trago o tutorial de como fazer os balões de comentários que estão me pedindo tanto! Kisses :*

96 comentários:

  1. Ameii o tuto , show e o que eu tava precisando me ajudou bastante !! Bjs flor seu blog e mto lindo super cute .... blogdaissll.blogspot.com

    ResponderExcluir
  2. Eu tava a procura disso esses dias rs

    ResponderExcluir
  3. adorei muito! nada melhor que deixar seu blog cada vez mais a sua cara né? amei! lelusantos.blogspot.com.br

    ResponderExcluir
  4. Florzinha, já tentei várias vezes arrumar meu layout, mais quem disse que dou conta? Mais adoro ver os post ensinando.

    Beijos da Bia
    www.biancasales.com
    Sorteio: http://www.biancasales.com/2012/12/sorteio-de-uma-camisa-cansei-de-ser.html
    Instagram: @blogbiancasales

    ResponderExcluir
    Respostas
    1. mds.. n consigo editar de jeito nenhum o html kkkkk nem mesmo com o tutorial...

      Excluir
  5. anny, faz um tutorial de como colocar essas barrinhas rosas nos gadgets. pvf

    ResponderExcluir
  6. aaamei vou fazer no meu http://diariodeuumagarota.blogspot.com.br/

    ResponderExcluir
  7. Anny,Faz um tutorial dessas Barrinhas Pink no Gadget do Blog ! Eu Amei Seu blog tá Lindo!

    ResponderExcluir
  8. Ai que lindo! Amei o tutu *-*
    Flor, tá tendo uma importante pesquisa lá do blog para melhorá-lo. Será que você pode ajudar?

    http://deumjeitosomeu.blogspot.com.br/2013/01/como-podemos-melhorar-o-blog-pesquisa.html

    Obrigada :3 e um Beijo
    Jesus te ama *-*

    ResponderExcluir
  9. Bem útil estava atrás desse tutorial,rs. Já estou usando! Beeijos!
    http://revolutionstartshere-oficial.blogspot.com.br/

    ResponderExcluir
  10. Mto util esse tutorial :)
    bjos,
    www.theattitudeincluded.blogspot.com.br

    ResponderExcluir
  11. Nossa Otimo O tutorial
    sigam ; http://wemoustache.blogspot.com.br

    ResponderExcluir
  12. Muito bom o tutorial.

    www.teenlist.blogspot.com

    ResponderExcluir
  13. Anny ensina como deixar o gadget tipo o seu. Tipo Categorias acima do gadget, por favor?

    ResponderExcluir
  14. ficou super legal, to usando ><

    imagine-com-biebs.blogspot.com/

    ResponderExcluir
  15. Lindo !! eu não sabia fazer isso ai tive que chamar mei amigo que é programador vim me ajudar kkk

    Faz uma visita ??
    http://peoplecrazystipoeu.blogspot.com.br/
    se seguir avisa para que eu retribua !!

    ResponderExcluir
  16. Eba! Estava precisando desse tuto ^-^

    xoxo
    http://cloudl4nd.blogspot.com.br/

    ResponderExcluir
  17. Este comentário foi removido pelo autor.

    ResponderExcluir
  18. Amei o post (alias,amo seu blog! Haha)
    >_<
    http://girls-x-girls.blogspot.com.br/

    ResponderExcluir
  19. Ouch eu não consegui achar :/

    ResponderExcluir
  20. Oiie fofa, tudo bom?
    Eu indiquei seu blog em uma tag que existe lá no meu blog ''Os Melhores Blogs 3013!''. Aqui está o link para você visitar: http://lincymods.blogspot.com.br/2013/01/os-melhores-blogs-de-2013.html
    Beijos, espero que goste!

    ResponderExcluir
  21. Ensina a fazer essa data na bolinha tracejada e os comentários no balão do pensamento eu ameii ensina por favor

    ResponderExcluir
  22. Oi fofa! Que bom que gostou de ser indicada lá no blog, fico feliz. Então, sobre as perguntas que você fez sobre o meu quarto, vamos lá: A minha parede, foi pintada com tinta preta e corante avermelhado misturado com branco, eu e minha irmã pintamos :) os vidrinhos, eu consegui em um encontrinho de Harry Potter (sabe como é vício, né, kkkkkkkk!), eu e minha irmã estamos fazendo um desses vidrinhos! Se sobrar, eu te mando um, e o Perry, eu comprei na Disney!
    Beijos linda, até logo!
    www.lincymods.blogspot.com

    ResponderExcluir
    Respostas
    1. Nossa, jurei que era contact haha
      Pena que não tem encontros onde eu moro :(
      Queria ir no Hogwarts Convention, mas né, em São Paulo fica foda :/ #xatiada

      Ai que legal, eu quero haha #brinks
      Lindo o Perry!

      Excluir
  23. Olá, adoro seu blog,sempre indico para minhas leitoras,
    não deixa de postar não viu?ha a ilustração no cabeçalho ficou linda,
    tbm ilustro,se quiser dar uma olhadinha...

    http://lancedefolhetim.blogspot.com.br/

    ResponderExcluir
  24. Amei o tutorial! Anny faz um ensinando como deixar o número de comentários nesse balãozinho que nem do seu blog?

    ResponderExcluir
  25. Amei, já estou usando!!


    http://glossdementta.blogspot.com.br/

    ResponderExcluir
  26. Muito bacana este tuto. Minha caixinha custou ficar do jeito que queria (:

    Bjs,Dani
    http://www.avidaemletras.com/

    ResponderExcluir
  27. Ameeii essse tuto,super criativo e vou usar e creditar.Teria como vc arumar esse post aqui >> http://goimagines.blogspot.com.br/2012/08/personalizar-o-menu-padrao-do-blogger.html#more quero fazer mas o botao ''mostrar'' nao ta funcionando.Please?

    ResponderExcluir
  28. Coloquei um agradecimento pra você no meu blog (:
    http://meninaeseuestilo.blogspot.com.br/2013/01/omenagem-aos-blog-que-me-ajudaram.html

    Obrigada.

    ResponderExcluir
  29. Nossa que legal..adorei!!
    Obrigada pela dica!

    Post Novo: Look do Dia! Vamos conferir ?
    http://nakitaaraujo.blogspot.com.br/

    Beijo!

    ResponderExcluir
  30. Adorei o tuto,acho que vou usar no meu próxmo layout . Seu blog é muito lindo,conheci ele hoje mas já adorei , rs , seguiindo . Criei meu blog ontem,gostaria tanto que você fizesse uma visitinha,estou agurdando ansiosamente,beijos!
    http://yasmincriistina.blogspot.com.br/

    ResponderExcluir
  31. Adoro seu tutoriais.
    Hoje em dia a caixa de pesquisa é muito importante em um blog. Tenho até que colocar uma rsrs

    Estou devolta a blogsfera. Se poder dar uma passadinha

    Beijos
    princess-intheclouds.blogspot.com.br

    ResponderExcluir
  32. Oii adorei a postagem e estava procurando a caixinha personalizada e encontrei!!
    Seguindo!!
    BJSS

    meumundomaisteen.blogspot.com

    ResponderExcluir
  33. Oi *-* Usamos, o problema foi na hora de mudar as cores que não deu certo.Se você entrar no blog vai vê como está, mesmo assim, obrigada <3 Dei uma olhada em seus tutoriais e estou utilizando alguns pro layout que to preparando (sou nova nesse mundo blogger sabe? hehehe) Beijos
    http://garotas-entendem.blogspot.com.br/

    ResponderExcluir
  34. Heeey, amei seu blog, lindo e com um ótimo conteúdo!
    Seguindo ^^
    Bjzuuus, Gabii..
    http://perpink.com

    ResponderExcluir
  35. ótimo tutorial! muito útil! amei seu blog, é perfeito!
    beijos (aguardo sua visitinha)
    link:Espaço Butterfly

    ResponderExcluir
  36. own, amei seu blog! uma amiga me indicou e não pude deixar de seguir ! seguindo tá? lindo o seu cantinho ♥

    http://ilovestarandbooks.blogspot.com.br/

    ResponderExcluir
  37. Olá Alana, eu gosto MUITO do seu blog e queria te pedir (se você quiser, ou ainda tiver) o seu layout antigo, aquele da menina com o gatinho no ombro? *---* Please, é perfeito! Beijinhos.

    - Klara Alessandra.

    ResponderExcluir
  38. ola lindinha , lindo blog em :) ja estou seguindo , segue la devolta ! http://www.blogthaisbrito.blogspot.com.br/

    ResponderExcluir
  39. Olá, ameei seu blog! Já estou usando a caixa de busca no meu! Aliás váááárias coisas são daqui rs' você esta de parabéns mesmo.
    xoxo
    http://eoventolevou-ju.blogspot.com.br/

    ResponderExcluir
  40. Alana por favor me responde ou faz um tutorial ensinando como você faz o titulo da postagem continuar personalizado quando se clica nele, pf pf pf pf *-* Preciso muito desse tutorial, eu conseguir personalizar o titulo da postagem do meu blog, mas quando eu clico nele ele volta ao padrão, por favor faz esse tutorial

    ResponderExcluir
  41. Uaal, muito bom esse tutorial em, gostei muito .
    Amiga voltei com o blog, estava sem tempo para posta ai desativei um pouco rs, mais já voltei, e tem um post novo lá falando o que será as novidades do blog, da uma passadinha lá, ficareei muito feliiz !
    Beijos, Liiah ;*
    SenhoritaAmbulante.blogspot.com

    ResponderExcluir
  42. Eu lancei meu blog agora então talvez eu use :)
    bjs,
    http://umolhardoparaisoblog.blogspot.com.br/

    ResponderExcluir
  43. Oi Anny! Finalmente apareci por aqui, rsrs. Então, eu acho bem importante um caixa de pesquisa no blog, principalmente depois que pus um menu com as tags mais importantes e acaba facilitando a busca não é? Achei a tua linda e é claro que tinha dedo da *linda* da Anny por aí! Hahaha. Já tô usando e deu certinho lá no blog, depois passar lá pra ver! (-:

    Um beijo,
    @annolivers
    http://world-cutest.blogspot.com.br/

    ResponderExcluir
  44. Muito legal o tuto! Já fiz lá no meu blog e ficou muito legal!
    Lindo seu blog! A cada dia fica mais perfeito!
    Beijão
    Batom De Framboesa.

    ResponderExcluir
  45. Anny,tem como você fazer um tutorial explicando como fazer esse "rodapé" igual ao seu?
    Esse lugar onde você deixou fan box do facebook,afiliados e tal
    e também,se der,faz um layout free igual ao seu,porque é lindo!
    ou se não disponibiliza bases para cabeçalho.
    resumindo:faz um tuto explicando como ter um blog igual ao seu

    ResponderExcluir
  46. Adorei a caixinha, estava procurando esses dias para colocar no novo lay, mas ai eu não achei um bonitinha, agora já era!! No próximo, eu volto aqui e coloco!

    Beijinhos
    duunogueira.blogspot.com

    ResponderExcluir
  47. oi, ehhh mas uma ehhhhh eu amei o seu blog, seguindo, retribua http://coffeein-paris.blogspot.com.br/

    ResponderExcluir
  48. Oi flor, estou amando o seu Blog, simplesmente lindo. Esta de parabén.... tenho o meu faz pouco tempo. E já procurei em toda parte e nunca acho.

    COMO COLOCO ESSE BUTAOZINHO QUE VC TEM PARA COMENTAR: (0 COMENTARIOS) EU QUERIA PERSONALIZAR O MEU.

    Achei o seu lindo que fica logo de baixo da data ficou maravilhoso, nos ensina como fazer esse tudo? E ainda como colocar um Blockquote divo como o seu abaixo das postangens? Axo que chama assim? rsrsrs

    Bjsss e muito sucesso.

    http://www.amoglamour.com/

    ResponderExcluir
  49. oii flor amei a postagem, e o seu blog achei muito lindo parabéns e eu queria saber se vc nao podia fazer algum tutorial de como criar um template se puder eu fico agradecida beijos linda

    aaa visita o meu blog
    http://mlleglamour.blogspot.com.br/

    ResponderExcluir
  50. Oi! Eu já fiz uma caixa de pesquisa personalizada, mas tirei pois não combinou com o layout :( ;)

    Kisses!

    The Fun Day (perfil)

    ResponderExcluir
  51. querida faz um tutorial dizendo como faz pra colocar o balao de comentarios e de data em cima da postagem,igual ao seu.ja estou te seguindo bjs

    ResponderExcluir
    Respostas
    1. Também estou "louca" para saber, ficou muito fofo. =)
      Seguindo ela tb, que blog mas lindo né? Apaixonei

      Excluir
  52. Ahhh, esse tuto caiu do céu, viu? Já estou usando esse 'search' no meu blog e não tive nenhum problema pra colocá-lo lá. Apenas ajustei a largura para caber na minha barra lateral e mudei a cor do hover do botão. Ficou ótimo. Aliás, diversos tutoriais do seu blog são ótimos. <3
    Beijos, Liliane.

    lileh-likes-coffee.blogspot.com/

    ResponderExcluir
  53. ooi linda, eu adorei mesmo o tutorial, mais eu queria que você colocasse alguns bottons para a caixa de pesquisa, você faz flor ?
    Seguindo aqui tá? Retribui a visita linda ?

    Link - Style Of Me

    ResponderExcluir
  54. Oi Anny, amei o tutorial e estou usando! ♥

    ResponderExcluir
  55. Ótimo tutorial!!!!
    É fácil achar como colocar a normal, mas a personalizada eu só encontrei aqui.

    ResponderExcluir
  56. Oi Anny, me ajuda! Segui um tutorial de um blog para tirar aquela barrinha de modelo travel, depois disso, não consigo mais procurar códigos naquela caixinha, nem achar os códigos no meu blog, poderia me ajudar??? PFV PFV PFV !!! Urgente!
    Beijos, aguardo resposta em CONTATOS no meu blog ok??

    http://teimosasim.blogspot.com.br/

    ResponderExcluir
  57. Muito obrigada ajudou muito! :)

    ResponderExcluir
  58. Tão fácil. Gostei tanto...
    Mas quando fui observar como fica em outros navegadores, aparece a caixinha desconfigurada :((
    será que há solução?

    ResponderExcluir
  59. Adorei , super fofo *-*
    http://maniadeallstar.blogspot.com.br/

    ResponderExcluir
  60. Alana, funcionou direitinho! Obrigado!

    ResponderExcluir
  61. Ameeeeei :D Estou usando no meu blog, obrigada :D

    www.amoraoprimeirorimel.blogspot.com

    ResponderExcluir
  62. Adorei o tutorial! Super fácil, obrigada!

    http://bellaflormakeup.wordpress.com/

    ResponderExcluir
  63. oii gostei muito dos seus tutorias mas os html mudaram :/ não são mais esses como faço ?

    ResponderExcluir
  64. Olá Alana,amei seu site e as postagens!
    mas eu gostaria de saber..
    como faço para colocar novamente imagem de fundo na caixa de busca?
    Agradeço desde já!!
    Ate + :)

    ResponderExcluir
  65. Consegui \o/ No começo eu não conseguia. Obrigado, Alana :'D

    ResponderExcluir
  66. Sempre venho aqui a procura deste tuto rs!

    - #quasemeianoite

    ResponderExcluir
  67. Muito bom! Meu ajudou muito. Graças a esse tutorial eu consegui fazer o que eu queria!

    http://my-little-candy.blogspot.com.br/

    ResponderExcluir
  68. Obg :3 Tutorial Muito Bom!
    http://falajohn.blogspot.com.br/

    ResponderExcluir
  69. Ki fofinho seu blog, mais queria mais tutoriais como: como enfeitar a data estou doida pra saber como faz beijo de cinthia. Blog: cinthiaemanuella.blogspot.com.

    ResponderExcluir
  70. Muito bom!No meu blog ( http://jaqueeditionsoficial.blogspot.com.br/ ) deu certo e eu achei muito fofo!

    ResponderExcluir
  71. Oi,

    Esse eu conseguir usar.

    ResponderExcluir
  72. Heey, adorei o post, mas queria que fizesse um tuto sobre como colocar a nossa própria imagem do lado do nome do blog?? tipo, o meu ainda tem a imagem do "B" lá em cima, ooq faço gatita?? oobg *--*

    mariedudreams.blogspot.com *--*

    ResponderExcluir
  73. Obg, mais n deu certo :/.... Estou seguindo, segue de volta ? *-*
    http://confde2adolescentes.blogspot.com.br/

    ResponderExcluir
  74. o meu nao esta achando esse codigo. pq?

    ResponderExcluir
  75. Perfeito tuto, sou nova no blog e vou começar a ver mais ele pq ate agr to adorando td s2

    ResponderExcluir
  76. Vc tem um blog incrível

    ResponderExcluir
  77. poxa queria mt fazer.. mais no meu nao acha o codigo: }]]>
    tipo q nao tem esse codigo no meu..
    me ajuda pfv??

    ResponderExcluir
  78. Olá Alana, li bastante posts seus, você escreve muito bem, parabéns, seus tutoriais também são bastante informativos, estou voltando a blogar agora, depois de alguns anos, será que poderíamos fazer uma parceria? Dês de já um abraço, e sucesso :)

    http://ummarinheiro.blogspot.com.br/

    ResponderExcluir
  79. Ameii, consegui fazer direitinho hehe obgg

    xoxo
    may

    ResponderExcluir
  80. Não estou conseguindo ir em ''pesquisar'' quando aperto Ctrl+F3 não da nada e quando aperto Ctrl+F4 a página fecha, o que eu faço?

    ResponderExcluir
  81. Amei a postagem ! Beijos
    Visitem meu blogger -> http://jenniferfivestars.blogspot.com.br

    ResponderExcluir
  82. bom essas coisas que estao entre /* eu acho tem que colar no html tambem?

    ResponderExcluir
  83. Salvou minha vida obrigada, vai lá e confere como ficou ?
    http://desaltto-alto.blogspot.com.br/

    ResponderExcluir
  84. Adorei a postagem foi muito útil. Obrigada pela Dica!
    http://cantinhodocs2.blogspot.com.br/
    http://cardslovee.blogspot.com.br/

    ResponderExcluir
  85. Este comentário foi removido pelo autor.

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.