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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQHBOP1lnetyC1vb2TX5NAh_CJ3Wo5jB3khyphenhyphenFjp-dNaVff0Ykd8SGHsV69IBIWa6FvMMDJNuxtq3LSwJhlq8ZCdg2XyhpBpmaM9LNvXa7vcJ-d_b1rNEiG-WBiYjNvN-aY31iVyJnxINQ/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/AVvXsEiI6UKwVCO2zgdf4R7HE_8gWSPp6vrqWAWL9dbvmcQ0d2eyQrAH6PfSiYK7UYQQlwHqy93nBYfxHoBjBT_reg5MowZOst_oYnsrPXJFHWUuAovAZx3co-6IbHGZpeeugPYCrbjAj1lEVE0/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/AVvXsEipPTbVJhIWg4O1TzjWIBjTYkE_r3igKtGEzpqh_cUUGfOgxpB4NpJKO5NGu88p3N0ATqqtFvKFYcblV8upqHejY3zxE3gVqID4jbIQk2AO5THx5vrpJcnpoA2o2b05dEikDONMItouSJM/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/AVvXsEg2n3bKkQgZv8fyW7PMoJH1YXiXGHIiRtFDDgR3MslSf8xFlg-12sMyAAIdbc9Jk-eWCvmQp8Zi4D0oeV-aByeX_XDtD-1C1yMF3b5lZLHX0q8N4ou4p7RUQPoNtAl-3-yOoE3MbQOQKtM/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!
29 comentários
Este comentário foi removido pelo autor.
ResponderExcluirQue lindos, um modelo mais lindo que o outro♥
ResponderExcluirTú arrasa sempre Reh♥
Bjão♥
Blog Rafaelle Venttura♥
Este comentário foi removido pelo autor.
ResponderExcluirRenata,levei o 3.
ResponderExcluirParabéns sucesso!
Muito lindo todos peguei o modelo 1 e quero te agradecer por disponibilizar e ajudar bjs fica com Deus
ResponderExcluirDificuldade em escolher o modelo kkkk
ResponderExcluirMuito 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
ResponderExcluirQue 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.
ResponderExcluirOii Renata, dica super útil para quem está buscando personalizar o blog.
ResponderExcluirO meu já está dentro do layout que eu escolhi, mas vale guardar a dica pra quando precisar né :)
Beijos
Fran
Achei e Rabisquei
Que lindos!! Eu adoro seus tutoriais <3 amei mesmo
ResponderExcluirGostei de todos os modelos, fica uma gracinha a caixa de pesquisa personalizada.
ResponderExcluirMuito legal seu blog, vi que tem várias dicas e tutoriais, vou voltar sempre haha bjs
Todos os modelos são lindos, você faz tutorial só para blogger? Beijos
ResponderExcluirCharme-se
Amoooore, você faz layout para wordpress também? O meu é e eu achei tão legal suas dicas! :)
ResponderExcluirE essas caxinhas são tão fofas!
Renata, eu simplesmente sou apaixonada e muito grata pelos seus tutoriais! Já me salvaram diversas vezes! Obrigada por compartilhar.
ResponderExcluirBeijos
www.hashtagtecontei.com.br
Adorei os modelos, meu preferido foi o 4, parecendo pintado com pincel... amei!
ResponderExcluirMuito legal disponibilizar coisas assim, ótimo pra quem tá começando!
Beijos!
Que modelos lindos! Adoro achar blogs que estão sempre disponibilizando conteúdo e dando um help na blogsfera <3
ResponderExcluirAmei!!
Beijos.
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!
ResponderExcluirWWW.THAYMINDA.COM
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
ResponderExcluirNossa achei muito bacana e útil! Vou dar uma olhada se tem mais coisas assim no seu blog :D
ResponderExcluirParabéns!!
beijos
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
ResponderExcluirVejo que muitas meninas tbm não dão importancia pra essa caixinha, se elas soubessem como é importante....
Nossa! Não sabia que tinha gadget para mudar a busca! Bom saber!
ResponderExcluirSeu blog é um charme, já me inspirei em tudo, rsrs bju
ResponderExcluirfoi dificil escolher mais amei todos,peguei o 2 muito obrigada renata que deus te abençoe ..bjs
ResponderExcluirobrigada! ajudou muito! que Deus continue te abençoando!
ResponderExcluirObrigada!!!
ResponderExcluirusei o modelo 2.
Muito útil Obrigado!
ResponderExcluirAdorei, me ajudou muito! obrigada!
ResponderExcluircomo que eu faço para deixar os textos e todo o resto dentro das gadgets centralizados?? obrigado
ResponderExcluirAdorei essa dica! Seus posts são os melhores! Peguei o modelo 4!
ResponderExcluirhttps://outonosencantados.blogspot.com.br/