Caixinha de pesquisa Personalizada

1. Vá no Design >> Elementos da Página >> Adiconar gadget >> GHTML/Javascript e cole o código abaixo sem modifica-lo.

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

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


  2. Vá no seu HTML, e usando o CTRL+F ou F3, procure por:

                ]]></b:skin

Cole acima da tag, o código abaixo

search{
float: left; /*Posicionamento esquerdo */
font-family: Tahoma, Tahoma; /* Fonte */
}
 .searchbar{
height: 20px;
width: 140px;
color: #FF82AB; /* Cor da fonte */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da parte onde é escrito */
} .searchbut{
background: url('URL DO BOTÃO'); /* Link da imagem do botão de pesquisar*/
width:30px;
height:30px;
border: 0;
padding:7px;
}

#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>

Para usar no seu blog adc um gadget html e cole o codigo do qual vc deseja! Espero que gostem!
   
Essa caixinha tem o botão de clicar mais aki não quer aparecer!

<form action="/search" method="get"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3sCUJWkUolX4Vx5OIBllJuCO4wHAQ-U_GRm9cO40aYreZvdlumF61OIX65saCRXLXiXkagt9gtxw8eZQZ4b_uF3vojBxMa5z0RLAeUWu1FWx5cCs_JdwJ4QY0QQM6K6R2Wb6dfWAG7WxS/s1600/minigifa+by+annyz+kawaii+blog+%2826%29.gif" /> <input type="text" name="q" value="" style="width:160px; height:19px; background-color:#ffffff; color: #000000; font-size: 11px; border: 1px double #000000;border-radius:5px;box-shadow: 0 0 0.4em #000000 , 0 0 0.4em#000000;" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3sCUJWkUolX4Vx5OIBllJuCO4wHAQ-U_GRm9cO40aYreZvdlumF61OIX65saCRXLXiXkagt9gtxw8eZQZ4b_uF3vojBxMa5z0RLAeUWu1FWx5cCs_JdwJ4QY0QQM6K6R2Wb6dfWAG7WxS/s1600/minigifa+by+annyz+kawaii+blog+%2826%29.gif" />

<br />
<br />
<input type="submit" value="Pesquisar❤" style="font-size: 12px; background-color:#ffffff; color: #ffaad5; border: 1px dashed #ffaad5;border-radius:5px;" /></form></cente