• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

13 de novembro de 2012

Caixa de Pesquisa personalizada

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

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>


Vá em Painel> DesignEditar 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: TahomaTahoma; /* 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;

}


Para ver mais modelos, desvende o mistério.

  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>

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

 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>

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:







Bjoon e até o próximo post o/

4 comentários: