Caixinha para pesquisa personalizada


  Caixa de Pesquisa Personalizada

Pra começar você vai adicionar um gadget de HTML/JavaScript, onde você quer que fique a sua caixinha de pesquisa, cole dentro do gadget o código abaixo e salve.


<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="GO" />
</form>


Não precisa alterar nada, mas onde está em negrito GO, você pode substituir por outra palavra...

Depois que salvar o gadget  vá em Modelo > Editar HTML> Pressione: Ctrl + F e procure por: ]]></b:skin> , e acima cole:


.search{ /* Nesta parte não mude NADA */
float: left;
margin-left: 30px;
font-family: Tahoma, Tahoma;
}
.searchbar{
height: 18px;
width: 140px; /* Largura */
margin-left:0px;
margin-top:-45px;
margin-bottom:-18px;
color: #FF84AD; /* Cor que aparece quando digitamos algo */
border:solid 1px #ddd;
padding:3px 5px;
border-radius: 10px;
box-shadow:0 1px 0px rgba(0,0,0,.1);
background: #fff; /* Cor de fundo */
background:-webkit-gradient(linear, left top, left bottom,from(#fff),to(#ededed));
background:-moz-linear-gradient(top, #fff, #ededed);
filter:progidXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed');
-ms-filter:progidXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed')
}
.searchbut{
border: 2px solid #FF84AD; /* Borda do botão normal, apague se não quiser*/
float:right;
background: #FFF; /* Fundo do botão normal */
cursor:pointer;
color:#FF84AD; /* Cor da letra do botão normal */
padding:0 5px 2px 5px;
height:26px;
margin-top: -20px;
margin-right: -35px;
font-family: Tahoma, Tahoma;
border-radius:25px;
-webkit-transition-duration: .5s
}
.searchbut:hover {
background:#FFF; /* Fundo do botão Hover */
color: #734836; /* Cor da letra do botão Hover, apague se não quiser */
border: 2px solid #734836 ; /* Borda Hover */
-webkit-transition-duration: .5s
}

Faça as alterações que preferir, somente nas partes que estão em Negrito. Salve e pronto.

Nenhum comentário:

Postar um comentário