Oi meninas tudo bem? Bom estava eu vendo os posts que tem na página goodies sobre personalização, e eu vi que tem muitos sim, mas os mais simples eu não fiz. E então fiz uma pesquisa de todos aqueles códigos, dicas e truques para personalizar o seu blog, mas que são bem simples. Então trouxe hoje um bem simples e que ajuda muito aos nossos leitores não é? Que é a caixa de pesquisa personalizada, que por sinal é muito fofinha. Super recomendo. Vamos ver?
Vá em Layout, a e adicione um gadget Html/JavaScript e cole o código a seguir.
<form action="/search" class="search" method="get">Vá em Modelo, Editar HTML, aperte CTRL+F, procure por ]]></b:skin> cole ACIMA fazendo as alterações desejadas :
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>
.search{
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
font-family: Tahoma, Tahoma; /* Fonte */
}
.searchbar{
height: 20px;
width: 140px;
color: #FF82AB; /* Cor da fonte */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da parte onde escrevemos */
}
.searchbut{
background: url('http://i39.tinypic.com/25ezh8z.png'); /* Link da imagem do botão de pesquisar*/
width:30px;
height:30px;
border: 0;
padding:7px;
}
Bem fácil né? Qualquer duvida é só falar.
Créditos á Other Things
29 Chocolates viraram Cupcakes
adoreii o tutorial.. já segue me blog? se segue obg..se ñ venha nos visitar
ResponderExcluirhttp://estilosgirls.blogspot.com
faz tempo que sigo o blog
Adorei o tuto flor, bem útil!
ResponderExcluirKisses!
http://productions-ofdreams.blogspot.com
Obrigada lindinha.
ExcluirBeijoos
Oi flor.
ResponderExcluirSeu blog é muito bonito, e gostei do post.
Já estou seguindo.
Beijos.
www.doceabril.com.br
Obrigada.Beijoos
ExcluirÓtimo tuto, será bem útil para todos!
ResponderExcluirspace-sweet-girl.blogspot.com.br
Aham vai sim. que bom ne.
ExcluirBeijoos
Adorei a dica!
ResponderExcluirwww.espacegirl.blogspot.com
Obrigada <3
ExcluirBeijoos
Eu vi seu comentário lá no meu blog (paradise-bieber.blogspot.com) Você quer fazer mesmo esse sorteio? Tudo bem, eu aceito a proposta, mais meu blog tem poucos seguidores e tals, nem sei se eles vão ver ou participar. Mais se você quiser fazer o sorteio, faz uma postagem no seu blog falando que vai ter um sorteio.. eu vejo e faço uma no meu ok? E eu coloco regras sim!!
ResponderExcluirAdorei o tutorial e também adorei seu blog,já estou seguindo.
ResponderExcluirBeijos
AR
Obrigada.
ExcluirAdorei a dica, favoritei. Vou usar nos meus templates, ok? Mais vou dar os créditos, pode deixar.
ResponderExcluirTá rolando concurso lá no blog, corra!
Até, chassy-bomb.blogspot.com.
Que bom linda. fique a vontade.
ExcluirBeijoos
Ótimo tutorial!
ResponderExcluirrascunhosdecaneta.blogspot.com
Obigada.
ExcluirAdorei o tutorial, adoro caixinhas de pesquisa personalizadas ^^ Ah, pode me ajudar? Só clicar aqui e votar na equipe 3, na enquete, que está na sidebar. Por, favor, só votar na equipe 3! Obrigada, beijos!
ResponderExcluirExplodindo Glitter
Ja votei linda
ExcluirBeijoos
Achei realmente uma fofura !
ResponderExcluirTem um concurso lá no blog, participa ?
http://awy-alwayswithyou.blogspot.com.br/2013/01/meta-atingida-layout-free-concurso.html
Beijooos ;
Oiêêêêêê!Amei o tuto!Seu blog é lindo! Já estou seguindo!Segue de volta?
ResponderExcluirObrigada!
luisadub.blogspot.com.br
Amei o tutorial fica linda a caixa de pesquisa.
ResponderExcluirblog-da-marci.blogspot.com.br
Obrigada linda
Excluirbom saber q vc da este tipo de dicas. ja que euzinha nao entendo nada de html rsrsrs.
ResponderExcluirBjos,
Carol
prosaeperfume.blogspot.com.br
Sinta se a vontade e volte sempre e pegue dicas aqui linda. haha
ExcluirBeijoos
Eu adorei o tutorial! O problema é que eu não achei o que você tinha pedido pra pesquisar....
ResponderExcluirOii, adorei o tuto, mais como coloco a imagem do botão de pesquisar ? Onde acho alguma ?
ResponderExcluirMt legal, foi facinho de fazer. Seu blog é uma gracinha, de mt bom gosto. Dá uma passadinha lá no meu blog. Bjs flor!!!
ResponderExcluirhttp://estetikaemakeup.blogspot.com.br/
Olá, Rosa! Muito bom seu tutorial! Criei o Edget e colei o primeiro código e de primeira já funcionou! Mas o segundo código que você instrui para colar acima do b. tá aparecendo nas páginas do Blog e não teve efeito nenhum!
ResponderExcluirBeleza Rosa, tudo ok! Esse tutorial foi de grande valia. Gostaria de saber como alinhar o botão OK com o campo background? O botão ficou um pouco mais acima desalinhado!
ResponderExcluirDeixe um recadinho sobre o blog. Obrigada!