Caixa de busca personalizada


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



Terceiro passo: O CSS


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.

2 comentários:

  1. Oi, Mi! Saudades dos teus posts, tá lindo o novo layout, gostei do tutorial <3 Ah, te enviei e-mail, quando puder olhar. bjs

    ResponderExcluir
  2. Muito obrigada pelo tutorial, foi muito útil! Irei creditar ♥ :)

    ResponderExcluir