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://4.bp.blogspot.com/-WSgBIY7mirc/V9lDnCOQjNI/AAAAAAAAI6Y/imF7HItp1TIS_WIddHLWM30VMsPf1J3wwCLcB/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://2.bp.blogspot.com/-M1vatrsiOPs/V9lDnf-DRMI/AAAAAAAAI6g/x278JAluBKo1V7vzc2ZHsZL-WpZL_8uywCLcB/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://4.bp.blogspot.com/-PMM9RRMe4yU/V9lDndi0RTI/AAAAAAAAI6c/sHoJLepL4xsBlR7KXFsSXxiUpkx9fmXQgCLcB/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://1.bp.blogspot.com/-tW4WyazOHT0/V9lDnooT8bI/AAAAAAAAI6k/S8B2qLzjpEIqcnlFgqo3lz1L73O7nT5twCLcB/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!

34 comentários :

  1. Este comentário foi removido pelo autor.

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

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

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

    ResponderExcluir
  5. Renata,levei o 3.
    Parabéns sucesso!

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

    ResponderExcluir
  7. 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
  8. 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
  9. 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
  10. Que lindos!! Eu adoro seus tutoriais <3 amei mesmo

    ResponderExcluir
  11. 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
  12. Todos os modelos são lindos, você faz tutorial só para blogger? Beijos
    Charme-se

    ResponderExcluir
  13. 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
  14. 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
  15. 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
  16. Que modelos lindos! Adoro achar blogs que estão sempre disponibilizando conteúdo e dando um help na blogsfera <3
    Amei!!
    Beijos.

    ResponderExcluir
  17. 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
  18. 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
  19. Nossa achei muito bacana e útil! Vou dar uma olhada se tem mais coisas assim no seu blog :D
    Parabéns!!
    beijos

    ResponderExcluir
  20. 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
  21. 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
  22. Nossa! Não sabia que tinha gadget para mudar a busca! Bom saber!

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

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

    ResponderExcluir
  25. obrigada! ajudou muito! que Deus continue te abençoando!

    ResponderExcluir
  26. Adorei, me ajudou muito! obrigada!

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

    ResponderExcluir
  28. oi muito obrigado gostei muito da dica usei o modelo 4 valeu

    https://1humanoaqualquer.blogspot.com

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

    ResponderExcluir
  30. 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

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

My Instagram

Copyright © Renata Massa. Made with by OddThemes