Caixa de busca personalizada

 

Vá no editor de HTML do seu blog, clique nos três pontinhos do seguinte código:

Agora, aperfe Ctrl+F e pesquise por ]]></b:skin>. Acima disso cole:

.search{
float: left;
font-family: arial !important;}
.searchbar{
height: 20px; /*Altura da caixa*/
width: 120px; /*largura da caixa*/
text-align:center;
color:#CORFONTE;
background: #BACKGROUND!important;
box-shadow: inset 1px 1px 6px  #dcdcdc;
font: 11px arial !important;
border: 2px solid  #000000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.searchbut{
background: url('URL DO BOTÃO');
width:27px; /*Largura do botão*/
height:20px; /*altura do botão*/
border: 0;
padding:2px;
}
.searchbut:hover{
background: url('URL DO BOTÃO HOVER');
width:27px; /*Largura do botão*/
height:20px; /*altura do botão*/
border: 0;
padding:2px;

As partes em negrito são as que você pode personalizar. Url do botão e url do botão hover é onde você coloca o link da imagem dos botões de pesquisa, respectivamente.

Agora, vá no layout do seu blog, adicione um novo gadget de HTML/JS e cole esse código:

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

Salve e pronto. Agora, fiquem com algumas imagens: