Tutorial - Caixa de Pesquisa Personalizada :3 + Botões para Caixa de Pesquisa

Girls Generation ♥

Boa noite minhas batatas fritas *-*

Bom, o tuto que eu trouxe é super útil e super fácil.

Sei que várias pessoas já conhecem esse tuto, mas ele tem que ter num blog, haha :)

Os créditos vão ao CB, então se for reblogar, não

se esqueçam dos créditos :)

Let's see 

1. Vá no seu HTML e procure por  ]]></b:skin>

Encontrou? Agora cole esse outro código acima do que você acabou

de procurar:

.search{

float: left;

font-family: Calibri !important; /* Fonte do campo de texto*/

}

.searchbar{

height: 20px; /*Altura da caixa*/

width: 190px; /*largura da caixa*/

border-radius:15px;

background:#fff;

text-align:center;

color:#ff048c !important; /*cor do texto*/

font: 12px Century Gothic !important; /*fonte do texto*/

}

.searchbut{

background: url('Url da imagem do botão');

width:30px; /*Largura do botão*/

height:30px; /*altura do botão*/

border: 0;

padding:7px;

}

Edite como você quiser, ao lado já tem explicando tudo

direitinho, e tem onde tem "URL da imagem do botão" , substitua pelo URL da imagem do botão que você escolher.

2. Agora, adicione um Gadget HTML/JavaScript , e nele 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>

Onde está em negrito substitua pelo oque você quer

que apareça na caixinha ^.^

E aqui alguns botões para a caixa de pesquisa de vocês: 

Créditos (www).

       

Kissus ;*