Tutorial : Caixa de Pesquisa personalizada .

Hey pessoas ! Como vão ? Espero que bem . Querem aprender a personalizar a caixinha de busca ? Igual a que eu tinha no Lay antigo ? Bora aprender ? Confira >>

Ficará assim :

#1 : Vá no seu HTML , dê Ctrl + F ou F3 e procure por </b:skin> e acima dele cole :

/*** Caixa de pesquisa ***/

#searchthis {
  width:90%;
  margin-left:9px;
  margin-top:15px;
  margin-bottom:-18px;
  display:inline-block;
  zoom:1;
  *display:inline;
  border:solid 1px #efe7dc;
  padding:3px 5px;
  border-radius:2em;
  box-shadow:0 1px 0px rgba(0,0,0,.1);
  background: #f6efe5;
  background:-webkit-gradient(linear, left top, left bottom,from(#fff),to(#efe7dc));
  background:-moz-linear-gradient(top, #fff, #efe7dc);
  filter:progid [:D] XImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#efe7dc');
  -ms-filter:progid [:D] XImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#efe7dc')
}
#searchform input {
  border:0 !important;
  float:left;
  padding:6px 10px;
  width:78%;
  border-radius:15px;
  background:#fff;
  box-shadow:inset 0 1px 3px #ccc;
  text-align:center;
  cursor:text;
  color:#ac1f36;
  font:italic 12px georgia;
  text-shadow:0 1px #fff;
}
#searchBox{
  background: #fff;
  padding: 6px 6px 6px 8px;
  width: 180px;
  border: solid 1px #bcbbbb;
  outline: none;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
  color:#e89ca9;
}
#submit-button {
  border:0 !important;
  float:right;
  background:#fb94b6;
  cursor:pointer;
  color:#fff;
  padding:0 5px 2px 5px;
  height:26px;margin-left:-20px;
  border-radius:25px;
  box-shadow:0 0 2px #aaa;
  text-shadow:0 -1px #aaa
}
#submit-button:hover {
  background:#cd7391;
}

#2 : Agora vá em Design → Editar HTML → Adicione um gadget de HTML/Javascript e cole o seguinte código:

<form action='/search' class='right' id='searchthis' method='get'>

<input class="input-text" id="searchBox" name="q" onblur="if(this.value==&quot;&quot;)this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=&quot;&quot;;" type="text" value="Pesquisar no blog" vinput="" />
<input class="searchbutton" id="submit-button" type="submit" value="OK" /></form>

Onde está vermelho, você altera o que vai escrito dentro da caixinha. E em rosa, é o que vai escrito no botão.

Créditos : (www) .