7 de jan de 2013

Caixinha de Busca

   Este tutorial é muito útil.
Esta caixinha é para facilitar a nossa busca quando entramos
em um blog. Vamos ao tutorial:

- Vá em Design - Elementos de Página
- Clique em Adicionar Gadget,  procure pelo gadget HTML/JavaScript e cole o código abaixo:


< input class="searchbar" id="s" name="q" type="text" value="" />
< input class="searchbut" type="submit" value="GO" />
< /form>

Você pode trocar a palavra "Go" pela palavra que desejar, é ela que fica dentro do botão para pesquisar.

Agora entre no seu HTML, aperte no seu teclado ctrl f para abrir a caixinha de busca,
quando abrir digite ]]></b:skin> dê enter, quando encontrar  acima dele coloque o código abaixo:
.search{ /* Geral */float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
margin-left: 0px;
margin-top: 6px; /* Margem superior, edite se precisar, - sobe e + desce */font-family: Tahoma, Tahoma; /* Fonte da letra que será escrita quando procurarmos por algo */
}
.searchbar{ /* Barrinha onde se digita */height: 18px; /* Altura da barrinha */width: 230px; /* Largura da barrinha */margin-left:0px;
margin-top:-45px; /* Margem superior, edite se precisar, - sobe e + desce */margin-bottom:-18px; /* Margem inferior, edite se precisar, - sobe e + desce */color: #ccc; /* Cor da fonte da letra que será escrita quando procurarmos por algo */border:solid 1px #ddd; /* Borda */padding:3px 5px;
border-radius:2em; /* Bordas Arredondadas */box-shadow:0 1px 0px rgba(0,0,0,.1); /* Sombra interna */background: #fff; /* Cor do fundo */background:-webkit-gradient(linear, left top, left bottom,from(#fff),to(#ededed));
background:-moz-linear-gradient(top, #fff, #ededed);
filter:progidXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed');
-ms-filter:progidXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed')
}
.searchbut{ /* Botão */border:0 !important;
float: right;
background: #D9D9D9; /* Cor do fundo do botão */cursor: pointer;
color:#fff; /* Cor do texto */padding:0 5px 2px 5px;
height:26px; /* Altura do botão */margin-top: -20px; /* Margem superior, edite se precisar, - sobe e + desce */margin-right: -35px; /* Margem direita, edite se precisar */border-radius:25px; /* Bordas Arredondadas */box-shadow:0 0 2px #aaa; /* Sombra */text-shadow:0 -1px #aaa; /* Sombra no texto Go */}
.searchbut:hover { /* Botão Hover */background:#F3A7C2; /* Cor do fundo do botão hover */}

Visualize e se estiver tudo certo salve!

4 comentários :

  1. não achei isso }]]> no meu HTML :/

    ResponderExcluir
    Respostas
    1. Duas Garotas, o código está corrigido.

      Excluir
  2. Respostas
    1. Rachel, o código foi testado,
      você deve estar esquecendo de colocar algum código,
      ou alguma pontuação.
      Tente outra vez.

      Excluir

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