Caixa de Busca personalizada para o seu Blog

Neste tutorial veremos como colocar uma caixa de busca personalizada no Blog. Essa é a nova versão de caixa de busca que também possui sistema de reconhecimento de voz ela tem uma aparência bem elaborada que pode deixar um visual bem elegante pra o seu Blog...

Vamos agora aplicar essa caixa de busca no seu blog.
Primeiro acesse o painel de edição. Vá em Modelo >> depois em Editar HTML >> e clique em Prosseguir.

Agora procure por um Tag então pra ficar melhor de encontrar pressione as teclas Ctrl + F do seu teclado e busque por:

 ]]></b:skin> 

Quando encontrar, a cima dele acrescente esse código CSS:

div.search-form { right: 0px; top: -71px; display: block; width: 282px; height: 45px; background: url(https://lh3.googleusercontent.com/-nPJQAv57wOw/T5TKdK3q5HI/AAAAAAAAA4U/pCfSM3sLXsY/s0/pesquisa.png) top right no-repeat; } div.search-form .search-sliding { position: relative; top: 11px; left: 14px; border: none; background: none; width: 220px; font-style: italic; color: #999; height: 27px; } div.search-form .search-label-sliding { position:absolute; top:34px; left:-4000px; } div.search-form .search-button { position: absolute; left: 263px; top: 10 px; background: url(https://lh3.googleusercontent.com/-nPJQAv57wOw/T5TKdK3q5HI/AAAAAAAAA4U/pCfSM3sLXsY/s0/pesquisa.png) top left; width: 55px; height: 45px; } div.search-form .search-button:hover { background-position:-55px 0;transition: all 0.4s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.3s ease;transition: all 0.4s ease; } div.search-form .search-button:active { background-position:-55px 0; -webkit-transition: all .8s ease;-o-transition: all 0.4s ease;-moz-transition: all 0.5s ease;transition: all 0.6s ease; -webkit-transform: scale(0.8);-moz-transform: scale(0.8);-o-transform: scale(0.8); -webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s; div.search-form .search-button a { background-position:-55px 0; margin:1px 0 0 1px; }

Em seguida Salve o Modelo 
Depois de ter salvo, vá no Layout do seu Blog e adicione um novo Gadget, Selecione o HTML/JavaScripts 

No novo Gadget você vai Colar esse código:

<form action='/search' class='search' method='get'> <div class='search-form'> <label class='search-label-sliding' for='search-sliding' style='left: 15px; opacity: 0.4;'></label> <input class='search-sliding' id='search-sliding' name='q' onblur='if (this.value == "") {this.value = "pesquisar";}' onfocus='if (this.value == "pesquisar") {this.value = ""}' title='Pesquisar post' type='text'x-webkit-speech="x-webkit-speech" value='Pesquisar'/> <input class='search-button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIZE43Y4yptyLFxjN8eJFLtmGaCNOLUAqartZt7vd-Lvh1Al85lhd3VOwiTq_U2_eKsfz_VsHDKtGg4c45C37Rjqdf_wcLfeb1fdNneb4M4GRE4e30SCakTomRof1P4lQCZKjP6vvK5Itt/s0/transparent.gif' type='image'/> </div> </form>

Prontinho pessoal, agora é só salvar e começar a usar o seu novo Gadget.