Um dos últimos comentários que recebi aqui no Seja Criativo, veio com várias dicas de tutoriais simples e importantes. Então vou aproveitar esta semana para postar alguns deles.

O primeiro tutorial que eu escolhi foi o da caixa busca personalizada. É um código simples, mas que sempre traz aquela ideia do copia e cola que a grande maioria dos blogueiros estão acostumados. Muitos tutoriais não explicam o código e acaba que você utiliza sem nem saber o que está copiando. Então vou além da explicação, vou deixar no finalzinho do post alguns link bacanas para quem quer ideias para personalizar a caixa de busca.

Vamos lá!

Obs.: Lembrando que todos os tutoriais disponibilizados aqui utilizam o Template Minima, para baixar basta acessar o link (download).

Obs. 2: Façam o backup do Template antes para evitar problemas futuros.

Primeiro passo: Entendo a estrutura

Antes de pensar na aparência da caixa de busca, é importante conhecer o código que você está utilizando. A estrutura é basicamente esta:

Segundo passo: O HTML

<div id='busca'> <form action="/search" class="search" method="get"> <input id="txtbusca" name="q" type="text" value="" placeholder="Digite o que você procura" /> <input id="btnBusca" type="submit" value="Ok"/> </form> </div>

Terceiro passo: O CSS

<style type="text/css"> #busca { margin:0 auto; padding:0; } #txtbusca { border:0px solid #222; background:#EEE; width:260px; height:23px; margin:0 auto; padding:5px 0 5px 5px; float:left; // posição do campo line-height:36px; // altura da linha } #btnBusca { background:#00cccc; position:relative; border:0px solid #222; color:#FFF; margin:0 auto; padding:10px; border:0 none; font-size:11px; font-weight:bold; text-transform:uppercase; } #btnBusca:hover { background:#99cccc; }<style>
E o resultado final:

Obs. 3: Lembrando que o CSS você pode usar e abusar da sua criatividade! :)

Quarto passo: Adicionando ao seu blog

1. Antes de mais nada, faça login em sua conta e acesse o painel do blogger;
2. Clique no menu "Layout" > "Adicionar um Gadget";
3. Adicione o gadget "HTML/JavaScript";
4. Cole as duas partes do código informado acima;
5. Salve e organize o gadget onde desejar.

Prontinho! Código simples e fácil de editar. Vou deixar aqui embaixo, alguns links para quem quiser se aventurar um pouquinho mais. Beijos!

Desenvolvendo layouts para caixas de pesquisa em páginas Web.
Criar caixa de pesquisa para blog.
Caixa de pesquisa para blog.