10 de nov de 2012

Caixa de busca personalizada

Olá Anjos!

Esses dias vou sumir um pouco do blog. O casamento do meu irmão está chegando e eu tenho que me arrumar pra isso e tal. Acho essas coisas muito chatas, mas infelizmente tenho que ir, então...
O blog vai ficar desatualizado por enquanto, mas logo logo estou voltando.

Hoje trouxe um tutorial que foi ensinado lá no Kawaii World. É um tutorial para colocar uma caixa de busca personalizada. Bom, eu conheço dois modos de fazer isso, personalizando a caixa padrão do próprio blogger, e um outro que é colocando uma caixinha. Hoje vou ensinar esse de colocar a caixinha.


Resultado
1- Vá em Design > Elementos da página e adicione um novo gadget de HTML/Javascript. Cole nele:


<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>


2- Agora vá em editar HTML e procure por:

]]></b:skin>

3. Acima dessa tag cole:


.search{
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
font-family: Tahoma, Tahoma; /* Fonte */
}
.searchbar{
height: 20px;
width: 140px;
color: #FF82AB; /* Cor da fonte */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da parte onde escrevemos */
}
.searchbut{
background: url('http://i39.tinypic.com/25ezh8z.png'); /* Link da imagem do botão de pesquisar*/
width:30px;
height:30px;
border: 0;
padding:7px;
}

Algumas imagens:

 





Todas feitas pela Kaori.

8 comentários:

  1. Gostei bastante do tutorial, acho que vou usa-lo no meu próximo template, mais pode deixar irei creditar seu blog, viu....

    X-Tudo Confissões

    ResponderExcluir
  2. Adorei sua forma de colocar as imagens da postagem IUSHAIUHSIUHA' Nunca havia visto isso antes. Lindo blog :3

    @Kawaii World.

    ResponderExcluir
    Respostas
    1. Eu gosto de fazer essas coisas diferentes ^^

      Obrigada

      Excluir
  3. Adorei seu blog viu guriazinha :) Lindo demais , no meu blog também tem esse tutorial então já conhecia . E as imagens também. SEGUINDO AQUI

    http://praia234.blogspot.com.br/

    ResponderExcluir
  4. Você mim perguntou se aceito afiliação, aceito sim.

    ResponderExcluir
  5. * - * Nossa ajudou muito no meu novo blog :)
    http://docegarotaamarga.blogspot.com.br/ seguindo seu blog, se poder retribuir eu agradeço muito ;)

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!