Personalizando a caixa de pesquisa do blog

06:01

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!

Você pode gostar também

24 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. Muito lindo todos peguei o modelo 1 e quero te agradecer por disponibilizar e ajudar bjs fica com Deus

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

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

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

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

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

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

    ResponderExcluir

Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possivel.
Um forte abraço a todos vocês!

Contrate o Blog

Meu blog faz parte do Modatrade


Renata Massa
Renata Massa
Modatrade | A vitrine dos blogs de moda
Modatrade | A vitrine dos blogs de moda