16.5.13

Caixinha de Pesquisa Personalizada

Yoo
Sabe aquela caixinha de pesquisa personalizada no meu layout ?
Então vou ensinar vocês a fazer uma igual 
Vamos ?
Vá no seu HTML e aperte Ctrl F ou F3 e procure por:

]]></b:skin
 Acima desta tag, cole o seguinte código:

.search{
float: left;
font-family: arial !important; /* Fonte do campo de texto*/
}
.searchbar{
height: 20px; /*Altura da caixa*/
width: 120px; /*largura da caixa*/
text-align:center;
color:#000000; /* cor da fonte da caixa*/
background:#dcdcdc!important; /* cor de fundo da caixa */
box-shadow: inset 1px 1px 6px  #dcdcdc; /* sombra interna*/
font: 11px arial !important; /*fonte do texto*/
border: 2px solid  #000000; /* borda */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.searchbut{
background: url('URL DO BOTÃO');
width:27px; /*Largura do botão*/
height:20px; /*altura do botão*/
border: 0;
padding:2px;
}

Substitua a parte "URL DO BOTÃO" pela URL de uma imagem que 
você deseja usar como botão da sua caixa de  pesquisa.
Agora adicione um gadget HTML/JavaScripe cole o seguinte código:

<form action="/search" class="search" method="get"> <input class="searchbar"
 id="s" name="q" placeholder='Digite o que procura' 
type="text" value="" /> <input class="searchbut" t
ype="submit" value="" /> </form>

Segue abaixo os botões pra vocês usarem !

         

Créditos (x)

12 comentários:

  1. Amei o tuto, muito perfeito :)
    Ah, você pediu afiliação no meu blog, claro que aceito ^^
    Beijos
    html-secrets.blogspot.com.br

    ResponderExcluir
  2. Amei o tutorial e aceito afiliação.
    ~Chu

    ResponderExcluir
  3. Que blog lindo, também gostei muito e também estou seguindo u.u
    Aaah, eu aceito afiliação sim, já te coloco :))

    ResponderExcluir
  4. Essa caixinha é mega fofa! Amei o tutorial *u*
    Ah! Eu asseito sim afiliação, já vou colocá-la nos meus afiliados ^^
    /Seguindo aqui também ;*
    P.S.: Brisei nesses coraçãozinhos fofos caindo aqui ^~^


    XOXO ;*
    empirecss.blogspot.com

    ResponderExcluir
    Respostas
    1. Obg amr ♥
      Tbm ja colocarei no meu afiliados ta !
      Kisus ♥

      Excluir
  5. Oi... Você perguntou se eu queria fazer parte da elite do teu blog... E a resposta é sim né amor... teu blog é divo e eu sonho ter um layoud perfeito igual o seu... Enfim, quando você me por eu te coloco também... Kiss s2

    (http://japassoudotempo.blogspot.com)

    ResponderExcluir
    Respostas
    1. Ok amora, obg ja te coloco no afiliados !
      Kisus ♥

      Excluir
  6. Nossa adorei o tutorial,muito útil1
    Obrigada pela sua visitinha lá no My Magic Place,a resposta esta lá no seu blog >> Stitch Dreams
    Tchau :*
    minhas-confissoes-2012.blogspot.com

    ResponderExcluir

♥ Todos os Comentários serão respondidos .
♥ Leia Antes de Comentar .
♥ Se for falar sobre algo além do post, comente sobre ele primeiro .
♥ Não aceitarei nenhum tipo de xingamento, mas estou aberta a críticas contrutivas .
♥ Se for usar ou repassar algum tutorial, utilitário ou qualquer coisa que te inspire no Sweet Glitter, NUNCA esqueça de dar os merecidos créditos.
♥ Deixe o link ou url do seu blog no final do comentário para que eu possa retribuir a visita .
♥ No mais, obrigado pela visita e sejam bem vindos !