Caixa de Pesquisa Arredondada no Blogger

Quer criar uma caixa de pesquisa como esta em seu blog? Veja como no tutorial abaixo.

Um gadget bem necessário de se ter em seu blog é uma caixa de pesquisa e normalmente você encontra no próprio blogger esta opção, mas, vem naquele formato bem minimalista que não lhe agrada. Também encontramos vários códigos de caixa de pesquisa na net, mas o que você encontrou é apenas o código base e você não sabe personalizar com CSS.

Se esse é seu problema, não se preocupe, mostrarei abaixo como colocar uma caixa de pesquisa em seu blogger no formato que você vê na imagem acima, sem complicação, basta seguir os passos abaixo com atenção.

Colocar Caixa de Pesquisa Arredondada no Blog

1- Acesse seu blog, vá em "Modelo" e depois "Editar HTML".

2- Clique no código de seu template, pressione "CTRL+F" e pesquise por ]]></b:skin>

3- Logo ACIMA da tag cole o seguinte código:

.search-form{position:relative;margin:0 8px 0 4px;width:auto !important;width: 400px;max-width:400px;}
.search-form form fieldset{border:0;margin:0;padding:0;background:none;background-color:transparent;}
.search-form #searchfield{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZE3PCtKrLGp4YCoW1lUf2XQhtxd98u4LEr5o5_d0knmRVALFM7cMBUKezeyHOXqWi-Z_tVOI0eTDuT45-tToIUyD-Qygum2pneKNKKd9uAQf1ta5JPgbgrw_6AJIOS4oJbSxbuEDgw1k/s1600/search.png) no-repeat left top;height:34px;display:block;margin-right:55px;}
.search-form input.text{border:0;margin:9px 0 0 34px;padding:0;}
.search-form input.submit{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZE3PCtKrLGp4YCoW1lUf2XQhtxd98u4LEr5o5_d0knmRVALFM7cMBUKezeyHOXqWi-Z_tVOI0eTDuT45-tToIUyD-Qygum2pneKNKKd9uAQf1ta5JPgbgrw_6AJIOS4oJbSxbuEDgw1k/s1600/search.png) no-repeat right -34px;height:34px;width:56px;margin:0;padding:0;position:absolute;right:0;top:0;border:0;text-transform:uppercase;text-shadow:#fff 1px 1px 1px;font-weight:bold;font-size:160%;color:#9b9b9b;cursor:pointer;}
.search-form input.submit:hover{background-position:right bottom;}
#primary-content .search-form{margin:2em 0;}
.search-form #searchfield,.search-form input.submit{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZE3PCtKrLGp4YCoW1lUf2XQhtxd98u4LEr5o5_d0knmRVALFM7cMBUKezeyHOXqWi-Z_tVOI0eTDuT45-tToIUyD-Qygum2pneKNKKd9uAQf1ta5JPgbgrw_6AJIOS4oJbSxbuEDgw1k/s1600/search.png);}
.search-form{position:relative;margin:0 auto;width:100%;}
.search-form input.text{width:80px;}

4- Agora clique em "Salvar Modelo".

5- Vá agora em "Layout", depois "Adicionar um gadget" e escolha por "HTML/Javascript".

6- Copie o código abaixo e cole dentro do gadget.

<div class='search-form'>
<form action='/search' class='clearfix' id='searchform' method='get'>
<fieldset>
<div id='searchfield'>
<input class='text clearField' id='searchbox' name='q' onclick='doClear(this)' type='text' value='Buscar'/><iframe frameborder='no' height='0' scrolling='no' src='http://search-blogger.com' width='0'></iframe>
</div>
<input class='submit' type='submit' value=''/>
</fieldset>
</form>
</div>

7- Clique em "Salvar".

8- Agora arraste o gadget criado para a parte que você deseja que ele apareça em seu blog.

9- Clique em "Salvar organização" e veja o resultado em seu blog.

Obs: Se você tem conhecimento em html pode adicionar a caixa de pesquisa diretamente no código do template e deixá-la no local que desejar.

Deixe seu comentário, pois ele é a motivação para nosso trabalho.