Sentimentos De Uma Otome: Caixa De Pesquisa Personalizada

Yooo minna, tudo bom linduxos?

Estou lhes trazendo um tutorial bem fácil e bem legal pra quem não quer aquelas caixas de pesquisa feiosinhas do blogger u.u

Vou ensinar a vocês a deixar a caixa de pesquisa assim:

u3u gostou? Então vamos começar! xox

~x~

1 Vá em Layout > Crie um Gadged de 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>

- Onde está escrito de vermelho " Digite aqui o que procura ". Você pode escrever qualquer coisa. u-u como na imagem que eu mostrei, o meu estava escrito " Procure no blog =3 ". U-U mais ai é a hora, pode escrever o que você quiser sz

Agora vá em Modelo > Editar Html , e cole o seguinte código, ANTES de: ]]></b:skin> (ctrl+F pra procurar)


.search{
float: left;
font-family: Century Gothic !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;
}