1 de abr de 2013

Caixa de pesquisa personalizada


Oiie galera, feliz dia dos homens, ta parei, já houve briga no meu Facebook por causa que eu postei isso no face e marquei uns meninos .. Mas não quero falar sobre isso, por que isso me irrita muito, pelo o que aconteceu

Enfim, vamos ?
A caixa de pesquisa vai ficar como a minha ok ?


1. Vamos no HTML >> CTRL F (ou F3) e procure por ]]></b:skin> e acima cole:
.search{
float: left;
font-family: arial !important; /* Fonte do campo de texto*/
}
.searchbar{
height: 20px; /*Altura da caixa*/
width: 120px; /*largura da caixa*/
text-align:center;
color:#000000; /* cor da fonte da caixa*/
background:#dcdcdc!important; /* cor de fundo da caixa */
box-shadow: inset 1px 1px 6px #dcdcdc; /* sombra interna*/
font: 11px arial !important; /*fonte do texto*/
border: 2px solid #000000; /* borda */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.searchbut{
background: url('URL DO BOTÃO');
width:27px; /*Largura do botão*/
height:20px; /*altura do botão*/
border: 0;
padding:2px;
}

2.  Altere as cores do seu gosto, troque o "URL DO BOTÃO" para a imagem q você quer colocar do botão e se precisar faça os ajustes necessário (as imagens a seguir não precisa ser ajustadas)



3. Agora você cria um gadget HTML/Javascript e cole:

<form action="/search" class="search" method="get"> <input class="searchbar" id="s" name="q" placeholder='Digite o que procura' type="text" value="" /> <input class="searchbut" type="submit" value="" /> </form>

Créditos ao blog Sweet Girl 

2 comentários:

- Comentários só de divulgação do seu blog, sem nenhuma opnião do assunto serão ignorados
- Faça comentários sobre o post
- Sejam educados, e não use palavrões
- Faça essa blogueira feliz, COMENTE