12 de jun. de 2014

Caixinha de busca

Olá, trouxe um tutorial que foi pedido na askPode postar como colocar caixa de pesquisa 
no status, como a do blog?

Coloque este código acima de ]]></b:skin>

.search{float:center;font-family:Arial; /* Fonte do campo de texto*/}.searchbar{height: 20px; /*Altura da caixa*/width: 160px; /*largura da caixa*/background:#fff;text-align:center;box-shadow:0px 1px 1px #ffffff;color:#c0c0c0 !important; /*cor do texto*/font:11px Arial; /*fonte do texto*/}.searchbut{background: url('URL DO BOTÃO'); /*URL do botão pesquisar */width:39px; /*Largura do botão*/height:33px; /*altura do botão*/border: 0;padding:7px;}

Onde quer que a caixinha apareça (pode ser no welcome de seu blog) coloque:

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

Algumas imagens para botões de pesquisa:





Se quiser personalizar a caixinha de pesquisa do próprio blogger:

Primeiro você deve inserir a caixa de pesquisa no seu blog. Vá em layout → adicionar um gadget → caixa de pesquisa, arraste o gadget e posicione-o na área desejada. Salve as alterações.Depois vá na aba modelo → editar html → prosseguir e procure por: ]]></b:skin>
Acima dessa tag, coloque o código abaixo:
td.gsc-input input { /*--- campo de pesquisa ---*/
height:10px; /* altura da caixa de pesquisa */ padding:3px; /* espaço entre texto e margens */ border:1px solid #333333; /* borda */ background:#EEEEEE; /* cor de fundo da caixa de pesquisa */ color:#999999; /* cor do texto */ font-family:Tahoma; /* fonte */ font-size:10px; /* tamanho da fonte */ text-align:left; /* alinhamento do texto */}
input.gsc-search-button { /*--- botão Ok, Pesquisar ---*/ height:13px; /* altura */ padding:3px; /* espaço entre texto e margens */ border:0; /* borda */ background:#333333; /* cor de fundo do botão */ color:#999999; /* cor do texto */ font-size:9px; /* tamanho da fonte */ font-family:Trebuchet MS; /* fonte */ text-transform:uppercase; /* transformação do texto */ text-align:center; /* alinhamento do texto */}
input.gsc-search-button:active { /*--- botão Ok, Pesquisar ativo, ao clicar ---*/ background:#000000; /* cor de fundo do botão ao clicar */ color:#999999; /* cor do texto */}
O código pode ser alterado por completo, mude as cores, tamanhos e tudo mais para deixar a caixinha 
do seu gosto. Depois de fazer a alteração no código, visualize o modelo e se gostou do resultado, salve.


9 comentários :

  1. Vou usar no meu blog...nossa vc me ajudou muito á séculos eu tento procurar caixas de pesquisas...obrigada ^.^ *.*
    Imagine Cherries || ADM *PQn Achocolatada

    ResponderExcluir
  2. Já tinha visto estilos assim , mas adaptei pra um especifico ! , VISITE?,

    www.candyedream.blogspot.com bjs

    ResponderExcluir
    Respostas
    1. Olá Keells, seja bem vinda. Também já utlizei o que vc usa em seu blog e gosto muito. Adorei seu blog e já estou seguindo.

      Excluir
  3. A sem esquecer , sera que teria como tu fazer um tutor de como colocar imagem abaixo da sidebar como no seu?

    ResponderExcluir
    Respostas
    1. Keells, primeiro você precisa saber a largura de sua sidebar, depois fazer a faixa, hospedar em um site para hospedagem de imagens e pegar o link.
      .sidebar .widget {
      Background: #ffffff url( URL DE SUA FAIXINHA )no-repeat bottom left;
      }

      Excluir
  4. clau, me ponha como adm do meu blog por favor! obg!
    só quero meu blog de volta, obg!

    ResponderExcluir
    Respostas
    1. Ricardo, você quando me colocou para postar em seu blog, me colocou como administrador e você como autor. Já consertei. Desculpe não ter percebido.

      Excluir
  5. Nossa super cute!!! Show !
    http://docebunny.blogspot.com.br/

    ResponderExcluir

Qualquer dúvida pergunte que
responderei com prazer.
Só peço que seu comentário
seja relacionado à postagem.

© Princess Tutoriais- Agradece sua visita
2014. Todos os direitos reservados
Pedidos? dúvidas? nos comentários ou na Ask.
imagem-logo