7 de janeiro de 2013

Caixa de Pesquisa Personalizada.

Olá galera, então hoje trouxe um pouco de 'HTML' para vocês, vou ensinar como colocar fundo na caixa de pesquisa estilo aqui do blog, vamos lá?

Bom eu vou usar um tuto de caixa de pesquisa lá do 'Cherry Bomb' mais a adaptação é minha. Enfim vamos ao que interessa. 

Primeiro vá em 'Modelo>Editar HTML>Prosseguir , de um Ctrl F e procure por ']]></b:skin>' Assim que acha, ACIMA cole este código:
.search{
float: left;
font-family: Century Gothic !important; /* Fonte do campo de texto*/
}
.searchbar{
height: 20px; /*Altura da caixa*/
width: 190px; /*largura da caixa*/
border-radius:15px;
background:url("URL DO BACKGROUND") repeat;text-align:center;
color:#ff048c !important; /*cor do texto*/
font: 12px Century Gothic !important; /*fonte do texto*/
}
.searchbut{
background: url('URL DO BOTÃO');
width:30px; /*Largura do botão*/
height:30px; /*altura do botão*/
border: 0;
padding:7px;
}

Entenda: Nas parte azul troque para o tamanho que deseja a caixa de Pesquisa. E no 'URL DO BACKGROUND // URL DO BOTÃO.' coloque o link do botão e do fundo.

Agora vá em 'Layout> Adicionar um Gadget> HTML/Javascript' e cole este código.

<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" placeholder='Coloque aqui uma frase.' type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>

Bom galera foi isso, espero que tenha ajudado. Qualquer coisa é só falar. Até a próxima.



8 comentários:

  1. Nem é complicado! O efeito é lindo :-)

    Um beijo, @annolivers
    http://world-cutest.blogspot.com.br/

    ResponderExcluir
  2. esse link do botão onde posso achar? a e posta mais sobre html

    ResponderExcluir
  3. Muito legal! Mas como você colocou a caixa de pesquisa em cima do título?

    ResponderExcluir
    Respostas
    1. com o tuto de colocar gadget no cabeçalho, 'kawaiiword'

      Excluir
  4. ;D muitoooo obrigadoooooooooooooo, eu vi este blog poracaso , estava no w arte pop e vi seu nome nos comentários, vim aqui ! e acheii muito, mais muito bom os tutos, efeitos.. obrigadoooo

    ResponderExcluir