Tutorial

Personalizando a caixa de pesquisa do blog

Olá meus amores, hoje eu trouxe para voces um TUTORIAL muito simples, de como personalizar a BARRA DE PESQUISA do Blog.

O codigo será o mesmo para todos os modelos, pórem já vou disponibilizar cada um com o link das imagens de cada modelo. Personalizei 04 MODELOS diferentes


Para esse tutorial, não existe segredo...

Basta você ir no LAYOUT, clicar em ADICIONAR UMA GADGET 
(HTML/ Java Script)


MODELO 1


<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMrL25Ggt0HTZMKEHrb7vMrwQ33OrG90Y_sMt7yABe_MUNVIuD6jJxwrEkhxZZOAA8fXONl9Y9WX70atvQR1stwVhyL1uAZModRkw7cNlpRJqnWuFyXzcRneGxAKPl6vRv5poRxXVOVK0/s1600/%252C%252C2.png) no-repeat;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #fff !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}
#button-submit{
background: url("") no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url("");
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Digite o que procura" />
<input id="button-submit" type="submit" value=" "/>
</form>


MODELO 2

<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx0np55GvtJc9NCeR0dg5nbYBX8Q1MQogQ_fYEjZHQV97krdN5YGdEFNR3Rxqlrf2_cERLX72JlcotklcDwVGVO4KzC5GVaLVSgbZMVD7HEjuSuDmVji7Y135O6y-_k4jdB73GachkMKs/s1600/%252C%252C1.png) no-repeat;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #fff !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}
#button-submit{
background: url("") no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url("");
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Digite o que procura" />
<input id="button-submit" type="submit" value=" "/>
</form>


MODELO 3


<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi91XZg6EVMxTRikqpnY8M4ieQEaYU90uYkZByqewVIPbL2B9hxYU2_NDb0IQGrAIEIRpQTiSuYDJCqva2jC_rcxLbe2Y1uxRTkAGfGSdFg3MXF0Sk32H4vl04cbb1EwWcrT1PEyUrIuJ4/s1600/..2..png) no-repeat;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #999!important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #999;
}
#button-submit{
background: url("") no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url("");
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Digite o que procura" />
<input id="button-submit" type="submit" value=" "/>
</form>



MODELO 4


<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXsETZ_QPuVER5GePmHA-2jEKSMlh9JsB6PRwWvUCv01AgqM8ftoGakmv-kMhMecMmNJFS0mnd6TPUgxei4hn4BvBUGavbtqy0IriTh1MD-9QdKTkrYhBdTWbYqyUgx82o-LnaY6LcoKc/s1600/..2.png) no-repeat;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #fff !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}
#button-submit{
background: url("") no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url("");
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Digite o que procura" />
<input id="button-submit" type="submit" value=" "/>
</form>

Espero que vocês tenham gostado, nao esqueça de deixar seu comentario!
Um forte abraço e até o próximo post, se Deus quiser!

Renata Massa

You Might Also Like

34 comentários

  1. Vanessa Melo14 setembro

    Este comentário foi removido pelo autor.

    ResponderExcluir
  2. Unknown14 setembro

    Que lindos, um modelo mais lindo que o outro♥
    Tú arrasa sempre Reh♥
    Bjão♥
    Blog Rafaelle Venttura♥

    ResponderExcluir
  3. Vanessa Melo14 setembro

    Adorei ♡
    Obrigada por disponibilizar
    o meu estava muito simplizinho kkkkk
    eu peguei o modelo 1 ♡
    http://vanessamelo26.blogspot.com.br/

    ResponderExcluir
  4. Vanessa Melo14 setembro

    Este comentário foi removido pelo autor.

    ResponderExcluir
  5. Anônimo14 setembro

    Renata,levei o 3.
    Parabéns sucesso!

    ResponderExcluir
  6. Unknown15 setembro

    Muito lindo todos peguei o modelo 1 e quero te agradecer por disponibilizar e ajudar bjs fica com Deus

    ResponderExcluir
  7. O Meu Mundo Louco15 setembro

    Dificuldade em escolher o modelo kkkk

    ResponderExcluir
  8. Suelen15 setembro

    Muito lindo!amei todos mas escolhi o da corujinha. Muito obrigado por disponibilizar,ainda nao sei fazer um sozinha,estou apanhando um pouquinho nos retoques hahaha. Parabens pelo trabalho e dedicaçao e disponibilizar gratuitamente. Deus te abençoe 7x mais. atelie cia do biscut

    ResponderExcluir
  9. Rita C.20 setembro

    Que blog tão giro! Como conseguiu os símbolos redondos das redes sociais? Já matei a cabeça a procurar formas e códigos e nada resulta.

    ResponderExcluir
  10. Achei e Rabisquei21 setembro

    Oii Renata, dica super útil para quem está buscando personalizar o blog.
    O meu já está dentro do layout que eu escolhi, mas vale guardar a dica pra quando precisar né :)

    Beijos
    Fran
    Achei e Rabisquei

    ResponderExcluir
  11. Unknown21 setembro

    Que lindos!! Eu adoro seus tutoriais <3 amei mesmo

    ResponderExcluir
  12. Suzi Gomes21 setembro

    Gostei de todos os modelos, fica uma gracinha a caixa de pesquisa personalizada.
    Muito legal seu blog, vi que tem várias dicas e tutoriais, vou voltar sempre haha bjs

    ResponderExcluir
  13. Simone Benvindo21 setembro

    Todos os modelos são lindos, você faz tutorial só para blogger? Beijos
    Charme-se

    ResponderExcluir
  14. Unknown21 setembro

    Amoooore, você faz layout para wordpress também? O meu é e eu achei tão legal suas dicas! :)
    E essas caxinhas são tão fofas!

    ResponderExcluir
  15. Daiane21 setembro

    Renata, eu simplesmente sou apaixonada e muito grata pelos seus tutoriais! Já me salvaram diversas vezes! Obrigada por compartilhar.
    Beijos
    www.hashtagtecontei.com.br

    ResponderExcluir
  16. Laura Nolasco21 setembro

    Adorei os modelos, meu preferido foi o 4, parecendo pintado com pincel... amei!
    Muito legal disponibilizar coisas assim, ótimo pra quem tá começando!
    Beijos!

    ResponderExcluir
  17. Rafaela Ficher!21 setembro

    Que modelos lindos! Adoro achar blogs que estão sempre disponibilizando conteúdo e dando um help na blogsfera <3
    Amei!!
    Beijos.

    ResponderExcluir
  18. Thay22 setembro

    Cada tutorial mais lindo que o outro, e esse blog lindo também! Dá vontade de mudar de layout todos os dias kkkkk Me ajuda Brasil!


    WWW.THAYMINDA.COM

    ResponderExcluir
  19. Unknown22 setembro

    Adorei! Vou testar bom eu blog, o meu favorito foi o 4, mas não combina com meu blog :( acho muito legal isso que você faz, ajuda muuuuuita gente <3

    ResponderExcluir
  20. Unknown22 setembro

    Nossa achei muito bacana e útil! Vou dar uma olhada se tem mais coisas assim no seu blog :D
    Parabéns!!
    beijos

    ResponderExcluir
  21. Graziella22 setembro

    Sou apaixonada pelos seus Layouts e dicas de como personalizar o blog, SÉRIO!
    Já me ajudou muito no meu antigo blog, eu corria muito pra cá HAHAHA
    Amei ess tutorial, é tão simples! Amei amei!

    Beijos
    http://chocowhovian.blogspot.com.br/

    ResponderExcluir
  22. Erica Oliveira22 setembro

    Muito boa essa sua dica, eu mesma não tinha caixa de pesquisa no meu blog pq não achava importante, até o dia que precisei achar um post e não conseguia rsrs depois disso resolvi incluir e facilitou bastante minha vida
    Vejo que muitas meninas tbm não dão importancia pra essa caixinha, se elas soubessem como é importante....

    ResponderExcluir
  23. Unknown22 setembro

    Nossa! Não sabia que tinha gadget para mudar a busca! Bom saber!

    ResponderExcluir
  24. Unknown01 novembro

    Seu blog é um charme, já me inspirei em tudo, rsrs bju

    ResponderExcluir
  25. Valéria Angel17 janeiro

    foi dificil escolher mais amei todos,peguei o 2 muito obrigada renata que deus te abençoe ..bjs

    ResponderExcluir
  26. Unknown19 janeiro

    obrigada! ajudou muito! que Deus continue te abençoando!

    ResponderExcluir
  27. Unknown14 abril

    Obrigada!!!
    usei o modelo 2.

    ResponderExcluir
  28. Unknown19 abril

    Muito útil Obrigado!

    ResponderExcluir
  29. Unknown18 julho

    Adorei, me ajudou muito! obrigada!

    ResponderExcluir
  30. Juliana Machado14 dezembro

    como que eu faço para deixar os textos e todo o resto dentro das gadgets centralizados?? obrigado

    ResponderExcluir
  31. João Vitor03 março

    oi muito obrigado gostei muito da dica usei o modelo 4 valeu

    https://1humanoaqualquer.blogspot.com

    ResponderExcluir
  32. Nalu Garcia20 abril

    Adorei essa dica! Seus posts são os melhores! Peguei o modelo 4!
    https://outonosencantados.blogspot.com.br/

    ResponderExcluir
  33. Neila Bahia16 maio

    Era o que faltava no meu layout. Me salvou!!!
    Obrigada, viu!?

    Super beijos,
    Missmoon | BLOG & ​ATELIER - Por Neila Bahia
    Moda, Consumo Consciente, Cultura e Cotidiano.
    Blog ♥​ Shop​

    ResponderExcluir
  34. Jéssica Godói15 fevereiro

    Lindos! Amei! Peguei o 3 viu? <3

    ResponderExcluir

Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possível.
Um forte abraço.

instagram