01/10/2012

Tutorial: Caixa de Pesquisa

Créditos: 
é um avião? não! é uma águia? não! é o SuperCupcake!
 A maioria de vocês já deve ter notado a caixinha do ask.fm flutuante, né?
 Pois então, eu recebo vários pedidos de tutoriais entre outras coisas por ela, mas eu queria avisar que os tutoriais não saem imediatamente já que todos os posts são programados (um por dia), então vai sim demorar um pouco pro seu pedido sair, ok?
 Mas voltando ao post de hoje, que foi um post pedido, a fofa da leitora quis um tutorial de como personalizar a caixa de pesquisa igual a daqui do blog. Caso alguém não tenha visto/esteja vendo esse post em um futuro no qual o lay já esteja diferente ele é/era assim:
 A minha ficou um pouco diferente do resultado normal, mas foi porque eu aumentei ela bastaaante e acabou ficando assim. O resultado que vocês terão será esse:
imagem do blog Blogueira Indecisa, cujo lay eu fiz :3
 Vá em Layout  Adicionar um gadget  HTML/Javascript e adicione o seguinte código:
<form action="/search" method="get"><input type="text" name="q" value="" style="width:180px; height:20px; background-color: CORDOBACKGROUND; color: CORDAFONTE; font-size: 11px; border: 1px solid CORDABORDA;border-radius:5px;box-shadow: 0 0 0.4em CORDASOMBRA , 0 0 0.4em CORDASOMBRA;" /><input type="submit" value="CLIQUE" style="font-size: 10px; background-color:#ffffff; color: CORDAFONTEDOCLIQUE; border: 1px solid CORDABORDA;border-radius:5px;" /></form>
 Aí é só fazer as seguintes mudanças:
 O que está em negrito é pra ser trocado pelos códigos das cores que você quiser. O que está em itálico você troca pelo que você quer que esteja escrito no botão de "clique". O que está sublinhado é a altura e a largura (respectivamente) da sua caixinha de busca, você pode mudar se quiser. O que está riscado é o tipo de borda que vai ter na caixinha normal e na de "clique" (respectivamente). 
 Claro que tem outras mudanças que vocês podem fazer, mas elas são mais simples e fáceis de se entender, aí deixo isso com vocês, ok? Qualquer dúvida é só falar comigo, como sempre.
Postagem completa por Piink Cookie. Todos os direitos reservados. Copyright 2012. Plágio é crime.
 E aí, gostaram? Espero que sim, e também espero que ajude e que usem, ok? Não se esqueçam de enviar as suas dúvidas e pedidos pro ask.fm e de creditar!
 É isso. Beijinhos com glitter :*

60 comentários:

  1. Que legal o tutu !!
    Eu to fazendo um novo lay, vou colocar essa caixinha!!ADOREI o tutu, beijinhos Emilia.

    coffemilia.blogspot.com
    sweettmustache.blogspot.com

    ResponderExcluir
  2. Amei o tutorial, na hora que abri, eu disse:
    -Parece com o do BI!
    Aí depois que eu li as letras minúsculas, haha'
    Muito bom o tuto, também quero ver a da Ask Flutuante!
    Beijinhos,


    blogueira-indecisa .blogspot.com

    ResponderExcluir
    Respostas
    1. Okok, pode deixar que faço o tuto! Bom que gostou, Ali *u*

      Excluir
  3. Acho que vou fazê-lo, porque aquela caixinha de pesquisa do Acesso Permitido tá muito abatida!.. KKKKKKKK

    O Quadro "TRUE ART!" foi atualizado no Acesso Permitido, entre pelo perfil do blogger ~*

    ResponderExcluir
  4. Muito fofa essa caixinha de busca e como sempre você fazendo MAGNÍFICOS tutoriais ;3
    Paulinha gostaria de saber quando sai o post sobre esmaltes magnéticos,se é que você vai faze-lo ;x
    Obrigada e Beijinhos ;*
    Cupcakeedicoes.blogspot.com

    ResponderExcluir
    Respostas
    1. Vou fazer sim, Lary! Provavelmente ainda demore um pouquinho (desculpa) mas é que comprei um magnético novo pra mostrar as diferenças dentre os dois que eu tenho e estou esperando ele chegar (foi pela net), mas assim que eu ter ele em mãos vou fazer seu post, ok? :3
      Bom que gostou!

      Excluir
  5. Amei, estava precisando, vou usar no Garotek :3
    Kisses ~

    Garotek.blogspot.com.br ~

    ResponderExcluir
  6. Simplesmente quero te parabenizar.... PERFEITO.. Acabei de colocar no Acesso Permitido!

    ResponderExcluir
    Respostas
    1. Oown, que bom que gostou, Andy! Vou ir lá ver ^^

      Excluir
  7. Adorei o tuto! Talvez use, vou ver se tem espaço, se não fica muito amontoado :S

    omeubrilhantemundo.tk

    ResponderExcluir
  8. Gostei ficou bem legal...belo tutorial.
    acho que depois vou colocar no blog.
    Bjks!

    ResponderExcluir
  9. Adorei, tava louca nesse tutorial, obrigado.

    itregina.blogspot.com

    ResponderExcluir
    Respostas
    1. Bom que gostou, fofa! Aah, que bom :3

      Excluir
  10. eu acho super legal essa personalizaçao ^^
    apesar de nao usar a caixinha de pesquisa. mas conheço mt gente q usa e acho super fofo

    ResponderExcluir
  11. adorei o tuto, fica muito legau rs
    beijãao

    ResponderExcluir
  12. Estava curiosa pra saber do modelo de Gadget até por ser diferente dos outros e sem imagem.

    World-cutest.blogspot.com

    ResponderExcluir
  13. Que lindaaaaaaaaaaaaaaaaaaaaa! *-* Acho que é a mais fofinha que já vi ~o acho muito top personalizar códigos pra gerar as próprias coisas \o/
    Beijooooooo!
    Just Debee

    ResponderExcluir
  14. Ótimo tuto! Haha , estava doidinha atrás desse tuto!

    Seguindo aqui , passa lá no blog e se gostar segue ~
    Beziitoos ~~> http://territorioteen-suh(.blogspot.com)

    ResponderExcluir
  15. Ficou muito lindo o estilo do blog.Amei,está lindo
    Beijão
    www.jujuba-amp.blogspot.com

    ResponderExcluir
  16. Haha' Adorei o tutorial, super fácil e o resultado fica uma graça! >-<'

    ResponderExcluir
  17. Pena que não tenho mais blog :C

    ResponderExcluir
  18. Adorei o tuto,acho que vou usar no próximo layout.

    Beijos
    Amora Ruffles

    ResponderExcluir
  19. Amei o tuto, a caixinha de pesquisa fica uma graça!
    Tem sorteio rolando lá no blog,dá uma olhadinha
    Beijinhos com chantili
    universoteengirl-porlarissa...

    ResponderExcluir
  20. Amei! Super útil! realmente o resultado vale a pena, aa já disse que amo o lay do seu blog? sempre visito aqui mais sou dã da cabeça aí não deixo coments nunca uhusashuhsu
    amore vim aqui avisar para você que o Adolescente Nerd já está reaberto, mudamos de Lay, espero sua opnião lá ein! ^_^ quero saber se o novo lay está aprovado por você, isso que é o mais importante!

    Megan: Subdona
    blog: Adolescente Nerd

    Beijos!

    ResponderExcluir
    Respostas
    1. Bom que gostou, fofa! Oown, brigada ><
      Okok, pode deixar que vou visitar!

      Excluir
  21. simples mas fica lindinha!!
    bjs
    Nois Conectados(vaii peloo perfil;)

    ResponderExcluir
  22. Que lindo ,comcertesa vou usar no meu lay novo <3
    Smileretro.blogspot.com

    ResponderExcluir
  23. ótimo post , lindaa ! :))
    http://meninachicmc.blogspot.com.br/

    ResponderExcluir
  24. Adorei o tuto, esses estilos de caixa de pesquisa são os mais bonitos que vi até agora *------*
    Amei o novo lay, está super lindo <333333333333

    Beijinhos~~> Paradise City

    ResponderExcluir
  25. aiin que caixinha de pesquisa fofinha *-* hihi
    -xoxo

    http://s2juuh.blogspot.com/

    ResponderExcluir
  26. Sempre quis saber esse tuto, super fácil e o resultado é fofo *-*
    Vou usar no meu novo blog que irei criar, hihi ^^
    Beijinhos!

    http://valentine-wn.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Bom que gostou, Mandy! Okok ^^

      Excluir
  27. Ajudou muiiito *-* Obg TshiaPaulett' . Faz um tuto de como adicionar ao blog aquela opção q tem "seguidores" . Eu não seei como. ajuda plz ^^

    ResponderExcluir
    Respostas
    1. O gadget de seguidores? ^^
      Bom que gostou, flor!

      Excluir