Caixa de Pesquisa Personalizada

Vá em seu HTML, dê um CTRL + F  e procure por:

]]></b:skin>

Acima da tag, cole o seguinte código:

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

}

Altere as cores tudo certinho. Mude URL DO BOTÃO pelo link de sua imagem e faça os ajustes necessários. Alguns botões para vocês usarem, peço que não mudem a parte do código do botão para que as imagens a seguir:

Bem, vamos a segunda parte do tutorial.

Adicione um gadget HTML/JavaScript e cole o seguinte código:

<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édito: The Lovers