Adolescente Nerd // Oficial: Caixa de Pesquisa personalizada

Hooý meus lindos, tudo bem?

)

(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:

Postado pela Lavynnya

Agora vamos lá?!

1º Vá em Elementos da página e adicione um gadget Html/JavaScript, em seguida cole o código abaixo:

<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:

<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;

}

(créditos e também)

Para fazer desse tipo...

1º Vá em Elementos da página e adicione um gadget Html/JavaScript, em seguida cole o código abaixo:

<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;
}