Personalizar a caixa de pesquisa nativa do Blogger

Buscadores nos blogs são tão necessários e essenciais para seus leitores como o a roda é para o carro andar. Sem um buscador o leitor/visitante de seu blog poderá ficar de mãos atadas ao tentar navegar pelo seu blog e  não conseguir encontrar exatamente aquilo que gostaria. Por isso deixa-lo mais atraente e a vista é uma sábia decisão. Dê a ele o destaque que merece, personalizando e deixando com uma aparência harmoniosa ou mesmo contrastante com o layout de seu blog. Eis aqui um bom hack de deixa-lo digamos, fofo.Lembrando que é necessário habilitar o widget de buscador que vem nativo no  Blogger. Para isso vá até o layot, clique em adicionar um gadget e clicar no buscador.

Implementar CSS                                                                             

No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 

Copie o código abaixo e cole no local indicado.

Copie o código abaixo e cole no local indicado.

/*Buscador ---------------------------------------------------------------*/
input.gsc-search-button {
margin:0 0 0 -13px !important;
color: #fff;
padding: 6px 5px;
background: #5D4330; /*cor do botão*/
border: 1px solid #E4DCD6!important;
-moz-border-radius: 0 15px 15px 0;-webkit-border-radius: 0 15px 15px 0;
}
input.gsc-input{
float:right;
width:200px !important;
color: #FFF;
background: #E4DCD6; /*cor do fundo da area de busca*/
border: 2px solid #5D4330 !important; /*cor da borda da área de busca*/
}
input.gsc-input {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmY6_sv2cz96dt8D8Ue1PEbaQu7w-AtgTNWiLFul_G40Wvvv0CrzIqM_PYCRZ3WQZDja2I-64SCm4y4Y9PWNydFEWzOQWoRTdglArjDLw1G4nFVF6podRQv11697ve7SqGBiug86Hg1xw/s1600/lupa.png);
background-repeat: no-repeat;
background-position: left;
padding: 4px 5px 4px 30px !important;
}