Hooý meus lindos, tudo bem?
![](http://media.tumblr.com/tumblr_m93hxsYHQk1r2hkh4.gif)
(le~ reação de vocês ao me verem por aqui)
Um de nossos leitores me pediu que fizesse a seguinte postagem:
Chuvas de Primavera: ooi, sou eu de novo, queria saber se você podiam fazer um tuto explicando como mudar o layout da caixa de pesquisa!! Beijoos
Primeiramente irei colocar o link da postagem que já temos sobre isso aqui:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheO6hUgo9RFORw7PmGuTB_Un2tM5psz7mMhwxo5b3bAnhtPeCkKan7GJc0-qdlyRTUegvTpfkWFzQhoCzOfGAsgUbyB_Qdv-ghE1TJRt3FqEKxsUG7OmIEyT3ho9aalnshHRVAEqYJDu92/s1600/minigifa+by+annyz+kawaii+blog+%2826%29.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheO6hUgo9RFORw7PmGuTB_Un2tM5psz7mMhwxo5b3bAnhtPeCkKan7GJc0-qdlyRTUegvTpfkWFzQhoCzOfGAsgUbyB_Qdv-ghE1TJRt3FqEKxsUG7OmIEyT3ho9aalnshHRVAEqYJDu92/s1600/minigifa+by+annyz+kawaii+blog+%2826%29.gif)
Agora vamos lá?!
1º Vá em Elementos da página e adicione um gadget Html/JavaScript, em seguida cole o código abaixo:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqsHmQgwSvbJ0tARCgZ8BKn7heCLhhefeb4N-I7aAwk8_UnP6BUQBmR9hdGgYUy4uz5MxWgN7f8PDwWoRfThMXn3A_qzU9TTlFty-w5dr0FrKpzyxKujzVEkRAoMAfkIiSrgKOalkrLcj9/s1600/searc.bmp)
<form action="/search" class="search" method="get"><input class="searchbar" id="s" name="q" type="text" value="" /><input class="searchbut" type="submit" value="" />
</form>
2º Vá em Painel> Design> Editar HTML> aperte CTRL+F e procure por:
]]></b:skin>
Agora cole em cima do código, esse:
.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;
}
(créditos)
Para ver mais modelos, desvende o mistério.
1º Vá em Elementos da página e adicione um gadget Html/JavaScript, em seguida cole o código abaixo:
![](http://3.bp.blogspot.com/-sTXgwjUj69E/UCGcw-ZAC0I/AAAAAAAACIo/CkJuIZrXU74/s1600/Captura+de+tela+inteira+2372012+195253.jpg)
<form action="/search" class="search" method="get"><input class="searchbar" id="s" name="q" type="text" value="" /><input class="searchbut" type="submit" value="" /></form>
2º Vá em Painel> Design> Editar HTML> aperte CTRL+F e procure por:
]]></b:skin>
Agora cole em cima do código, esse:
.search{
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */font-family: verdana, verdana; /* Fonte */}.searchbar{height: 20px; */ altura da caixa*/width: 190px; */ largura da caixa*/color: #FF8080; /* Cor da fonte onde escrevemos na caixa de psquisa */-moz-border-radius: 0px;-webkit-border-radius: 0px;-goog-ms-border-radius: 0px;background: #FFF; /* Cor de fundo da parte onde escrevemos na caixa de pesquisa */}.searchbut{background: url('http://4.bp.blogspot.com/-wDpqpdO9N30/UCGZufEcoII/AAAAAAAACHk/mswJQxClHxE/s1600/gopalomamorais2.png'); /* Link da imagem do botão de pesquisar*/width:30px;height:30px;border: 0;padding:7px;}
Para fazer desse tipo...
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc-cb6mElK7aBV249CuvUYu_8EEYViuUjhTNJieGm8vYgG1wHnB59BYpC1FyxvTSaYGt6pmJ2sAqiv7SfoQaBgnsO10VUdhw-qfFamA9YgRfIyN38HOsLjpNhnjgk9XPFIxTcSgIcWlXs/s1600/Captura+de+tela+inteira+15092012+125824.bmp.jpg)
<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" placeholder='Escreva aqui' type="text" value="" /><input class="searchbut" type="submit" value="" /></form>
2º Vá em Painel> Design> Editar HTML> aperte CTRL+F e procure por:
]]></b:skin>
Agora cole em cima do código, esse:
.search{
float: left;
}
.searchbar{
height: 20px;
width: 200px;
border-radius: 2px;
border: 1px solid #8d8d8d;
background:#bcbcb9;
text-align:center;
color:#2f2f2e !important;
font: 10px verdana !important;
text-shadow:0 2px #fff;
}
.searchbut{
background: url('LINK DA IMAGEM DO BOTÃO');
width:39px; /* largura da imagem /*
height:33px; /* altura da iamgem /*
border: 0;
padding:10px;
}
Bônus:
![](http://25.media.tumblr.com/tumblr_ma9cgdph8u1rw5ri9o1_400.gif)
![](http://24.media.tumblr.com/tumblr_m8cm3kpGfo1r40zuto1_500.gif)
![](http://25.media.tumblr.com/tumblr_mc9tqdkyh01qijhi2o1_400.gif)
![](http://25.media.tumblr.com/tumblr_mbxu71xl2G1r40zuto1_500.gif)
![](http://24.media.tumblr.com/tumblr_ma1thl23KC1r40zuto1_500.gif)
![](http://24.media.tumblr.com/tumblr_m9sm71oHYO1r40zuto1_500.gif)
![](http://25.media.tumblr.com/tumblr_m94eyzsLjn1r40zuto1_500.gif)
Bjoon e até o próximo post o/
Adorei o tuto e os gifs.
ResponderExcluirBeijos
Amora Ruffles
haha' que bom, obg por comentar e volte sempre
Excluirouww adorei o tutu, muito lindo
ResponderExcluirAmei os gifs tambem >.<
~~Chu
obg amore, fico feliz, volte sempre :3
Excluir