Caixa de pesquisa em CSS para Blogger

Ter um campo de busca é muito importante para seu blog. Pois quando um leitor gosta do seu blog, ele não se contenta lendo apenas um artigo. Com a caixa de buscas é possível conseguir muitas visualizações de página e acesso aos seus artigos.

Abaixo, deixo o código desta bela caixa de pesquisa, com personalização simples em CSS:

<style type="text/css">
#pesquisafsm-caixa {
background: #eee; padding:10px; border:0 none; width:170px;
}
#pesquisafsm-botao {
border: 1px solid #222;
color: #eee; 
background: url(http://i.imgur.com/cz4sguf.png) no-repeat left #4591fa;
margin-left: -3px;
color:#fff;
font: 'trebuchet ms', trebuchet;
padding:10px 10px 10px 22px;
border:0 none;
font-weight:bold;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
}
#pesquisafsm-botao:hover {
cursor: pointer;
background:  url(http://i.imgur.com/cz4sguf.png) no-repeat left #2375E6;
}
</style>
<form action="/search" id="searchthis" method="get" style="display: inline;">
<input id="pesquisafsm-caixa" name="q" placeholder="O que está procurando?" size="40" type="text" /> <input id="pesquisafsm-botao" type="submit" value="Pesquisar" /> </form>

Como inserir em seu blog

1. Inicialmente, faça login em sua conta e acesse o painel do blogger;
2. Escolha o blog desejado, e clique no menu "Layout" › "Adicionar um Gadget";
3. Adicione o gadget "HTML/JavaScript";
4. Cole o código informado acima, sem modificar nada;
5. Salve e organize o gadget aonde desejar que a caixe de pesquisa que apareça em seu blog.