Tutorial: Caixa de busca personalizada

Oi!

Bom hoje eu trouxe um tuto de caixa de busca personalizada! A caixa de busca fica bem bacana! Da para mudar as cores e tudo! Vamos lá!

Preview aqui

• Click em Layout >> Adicionar um gadget >> HTML/JavaScript
•  Copie o código.Cole esse código lá:

 <style>

#search {

float:right; 

height: 30px; 

margin:10px 0 0 0; 

}

#search input.field {

font-family: "Arial","Lucida Sans Unicode",Arial,Verdana,sans-serif; 

background-position:top right; 

background-repeat:no-repeat; 

width: 130px; 

padding:7px; 

outline: none; 

font-size: 13px; 

border: none; 

z-index: 1; 

height:16px; 

float:left; 

padding-right:30px;

}

#search input.field:focus {

background-position:top right; 

background-repeat:no-repeat;

}

#search input.submit {

width:auto; 

height:30px; 

font-weight:bold; 

float:left; 

border:none; 

font-family: Arial, Helvetica, sans-serif; 

font-size: 13px; 

cursor:pointer; margin:0 0 0 1px;

}

#search input.field {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZfMuiAuIxq4uFYz_SEqahK0KD4j3rf1zgiUt0ifJyNgVGF_coMh7WjkrYRBLpjol4GHIaKuwwLDfcJCM4-kQvYSGCFGADmWrCNuVeDqX1AygBbRuzu5ihxEnvXoleqZWEJZ1xnqwyIfOu/s30/search_icon.png); 

background-color:#F7F0FE; /*cor de fundo de onde digitamos a busca*/

color: #000;/*cor de fonte*/

}

#search input.field:focus {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZfMuiAuIxq4uFYz_SEqahK0KD4j3rf1zgiUt0ifJyNgVGF_coMh7WjkrYRBLpjol4GHIaKuwwLDfcJCM4-kQvYSGCFGADmWrCNuVeDqX1AygBbRuzu5ihxEnvXoleqZWEJZ1xnqwyIfOu/s30/search_icon.png); 

background-color:#fff;/*cor de fundo do botão Buscar em estado hover*/

}

#search input.submit {

background-color:#DCB3FA; /*cor de fundo do botão Buscar*/

color:#fff;/*cor da fonte do botão Buscar*/

}

</style>

<div id='search'>

<form action='/search' id='searchform' method='get'>

<div><input class='field' id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Digite sua busca..&apos;;}' onfocus='if (this.value == &apos;Digite sua busca..&apos;) {this.value = &apos;&apos;;}' type='text' value='Digite sua busca..'/>

<input class='submit' name='submit' type='submit' value='Buscar'/></div>

</form>

</div>

• Salve.

Eu negritei as cores que podem ser alteradas

-Cor da fonte

-Cor do fundo onde digitamos

-Cor do fundo do botão buscar

-Cor do fundo do botão buscar em hover

As cores são aquelas que estão com hashtag que são as cores hexadecimais em HTML, click aqui para acessar a Tabela de cores hexadecimais!

-P4nda