Caixa De Pesquisa Personalizada

Ayoo ~~

Infelizmente estou assistindo Patati e Patatá por causa da minha imã! Ela está dançado umas músicas aqui e tals. Ultimamente estou visitando muito blogs de moda, pois vai ter uma festa de despedida (entrando de férias) na Escola e quero está linda, o menino que eu gosto me chamou para dançar com ele na festa então não poço fica terrível!

Enfim, como vocês gostam de ter um blog totalmente personalizado e lindo, claro que não pode faltar uma Caixa de Pesquisa personalizada e fofa. Por isso o tutorial de hoje é como personalizar a caixa de pesquisa e deixar ela fofinha e linda! Não é difícil mas se você mexer em coisas que não deve, ela irá ficar toda desconfigurada. Vamos conferir?

Lest Go Baby ~

Preview

1. No seu editor de Html procure por ]]></b:skin>, acima do código cole:

.search{

float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */

font-family: AbeeZee ; /* Fonte */

}

.searchbar{

height: 20px;

width: 200px;

color: #fff ; /* Cor da fonte */

-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background:#FFFFFF; /* Cor de fundo da parte onde escrevemos */

}

.searchbut{

background: url('LINK DO BOTÃO'); /* Link da imagem do botão de pesquisar*/

width:39px;

height:33px;

border: 0;

padding:9px;

}

Personalize somente o que está em Negrito!

2. Para a caixa de pesquisa funcionar em um gadget HTML/JV cole:

<form action="/search" class="search" method="get">

<input class="searchbar" id="s" name="q" type="text" value="" />

<input class="searchbut" type="submit" value="" />

</form>

Xoxo :3