terça-feira, 29 de janeiro de 2013

Caixa de pesquisa personalizada estilo JD

Ec93586a57521dc757ef069ea5b73733_large
Hooy gente Mini Gifs hoje eu finalmente vou ensinar vocês a fazerem uma caixa de busca personalizada no estilo JD. Foi um dos tutoriais mais pedidos desde o ano passado e apesar de eu ter prometido Mini Gifs pra algumas leitoras que eu ia ensinar, eu realmente estava em dúvida se postava aqui no blog ou não. É que eu fiz uma ''maracutaia'' de códigos pra conseguir o resultado que eu queria então quem não tem uma base em HTML provavelmente vai ficar perdidinha e não vai entender nada . Mas eu vou tentar simplificar o tutorial tá?!

Eu dividi o tutorial em 6 etapas pra explicar certinho como conseguir uma caixa de busca personalizada como a minha, bora conferir?! É só clicar em leia mais...

http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif  Eu fiz meu cabeçalho (com o photoscape) mas se você souber usar outros editores melhor ainda, daí você já inclui uma área de pesquisa na montagem, de preferência acima da sua sidebar (barra lateral). assim como eu fiz, olha:
A imagem é do meu último lay (divo *--*), mas eu usei esse mesmo esquema pro atual, tá?

http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif  Agora você vai colocar o cabeçalho no template seguindo esse tutorial do trechy teen (www), ou pode ser do seu jeito (se preferir). 

http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif  Se a sua barra lateral NÃO É dividida em blocos como a minha, você vai ter que dividir seguindo esse tutorial do fashion scream (www)... Eu disse que tinha feito uma ''maracutaia'' de códigos hehehe

http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif  Agora nós vamos deixar o 1° gadget com fundo transparente. Então vá no seu HTML e pesquise por:                
.sidebar .widget:first-child {

Abaixo desse código cole: 
 background: url('url da imagem') no-repeat;
Visualize. Se o 1° gadget tiver com o fundo transparente SALVE!

http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif  Finalmente vamos instalar a caixa de busca! Acima de ]]></b:skin>  cole isso:
.search{
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
font-family: Tahoma, Tahoma; /* Fonte */
}
.searchbar{
height: 20px;
width: 140px;
color: #FF82AB; /* Cor da fonte */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da parte onde escrevemos */
}
.searchbut{
background: url('http://i39.tinypic.com/25ezh8z.png'); /* Link da imagem do botão de pesquisar*/
width:30px;
height:30px;
border: 0;
padding:7px;
}
SALVE! Agora vá em Design > Elementos da página > Adicionar Gadget > Adicione um gadget de HTML/Javascript. Cole nele:
<div style="background:url(LINK_DA_IMAGEM) no-repeat;padding-right:9px;padding-left:37px;padding-top:20px;padding-bottom:10px;">
<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form></div>
Você pode alterar os números grifados de vermelho pra ajustar a caixa de busca.

padding-right: equivale á margem direita;
padding-left: equivale á margem esquerda; 
padding-top: equivale á margem de cima;
padding-bottom: equivale a margem de baixo


 A intenção é que a caixa de busca fique no 1° gadget, aquele que deixamos transparente:

http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif  Agora nós vamos subir ou descer o a sidebar...
Daí vc vai e pergunta, como assim jackie subi e descer pra quê?

Ex. No meu atual layout eu subi a sidebar pra caixa de busca ficar no topo do layout olha:

Já no meu antigo layout eu desci a sidebar pra caixa de busca ficar como eu queria:

Pra subir ou descer a sidebar vá no seu HTML e pesquise por:

.main-inner .column-left-outer { (se sua sidebar for do lado esquerdo)
.main-inner .column-right-outer { ( se sua sidebar for do lado direito)

Quando encontrar, cole abaixo desse código, esse outro aqui:
margin-top: -100px;
 Pra subir a sidebar é só aumentar o número (no meu caso é -444), pra descer a sidebar abaixe o número (:


Gente fiquei a tarde inteira tentando fazer esse tutorial #sério, é porque vocês me pediram muuuuito e mesmo sabendo que ia ser difícil de explicar eu tentei, afinal como eu disse no inicio do post eu fiz uma ''maracutaia'' com códigos até conseguir esse resultado, espero que gostem e qualquer dúvida estou aqui é só chamar ;D

:iconcutepandaismybf:
Inté bye bye amores <3

30 comentários :

  1. Ah guria , até que esse tutorial não é essa "maracutaia" toda que você falou, hausha (:
    Ficou bem bacana, e eu estava esperando um tempinho já pra você postar esse tutorial.. talvez eu faça no meu próximo layout!
    Beijos e felizmente você conseguiu explicar tudinho direitinho, rs *-*
    http://cenariumfashion.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Gente eu nao entendi nadica de nada help aqui plis !
      Visitem meu blog: http://blogueiramaluca.blogspot.com.br/

      Excluir
  2. Que maracutaia de códigos Jackie rsrs, eu tbm faço isso muitas vezes pra conseguir um resultado que eu queria, mas depois acabo nem lembrando como eu fiz kkkkkkk' Adorei o tuto, fica lindo o resultado , bbj !

    naidadeteen.blogspot.com

    ResponderExcluir
  3. Nossa!!1
    seu blog é super kawaii adorei já sou seguidora olha tem uma tag pra vc no meu blog se quiser fazer

    http://dreams-of-niah.blogspot.com.br/2013/01/minha-nova-teg.html

    ResponderExcluir
  4. Que m[aximo Jackie, eu era louca pra saber como era caixa de pesquisa e descobri que a minha é desse mesmo modo, só que quebrei a cabeça pra fazer :s e não tenho o fundo personalizado como a sua.

    Amei. bj

    ResponderExcluir
  5. Ah, é bem fácil sobrinha u.u Um truque tão simples e ninguém percebia, why god :o
    paradise-goodies.blogspot.com

    ResponderExcluir
  6. Caramba tem que se dedicar, pra conseguir esse efeito! Mas com certeza vale a pena!
    Amei o tutorial! Acho linda essa caixa de pesquisa!
    Bjo, Sel ;*

    ResponderExcluir
  7. Fiz uma coisa meia parecida com a minha caixa d pesquisa(só q mais simples). Só q eu usei um background na sidebar inteira, rsrs. Bem mais simples assim ^^
    fashion em cores -com

    ResponderExcluir
  8. Superrrrrrrrrrr!!! Sempre tive esta curiosidade, Jackie, mas tinha medo de perguntar. rsrsrsrs... Tem gente que não gosta de "revelar" seus segredos! kkkkkkkkkkk... Está guardado para meu próximo layout. :-) Xerinnho, Linda!

    solteiras-noivas-casadas.blogspot.com


    ResponderExcluir
  9. Eu sou a prova de que você ficou a tarde tida fazendo o TUTU' e claro que o resultado fou incrível >.<

    ResponderExcluir
  10. Os seus layouts são lindos e divos, e seus tutoriais bem lindos e uteis, o que seria da gente sem vc?!
    -Beijos ^^//
    cotidianodeumabarbie.blogspot.com

    ResponderExcluir
  11. Adorei, sempre quis saber como você fazia as suas caixas de pesquisa, eu só não consegui entender :/

    ResponderExcluir
  12. Que amor o tuto! Pena que já tenho a minha caixa de pesquisa, mas essa é tão fofa...

    Bjs
    garotas-cupcakes.com

    ResponderExcluir
  13. Sim esse tuto é demais mesmo, mais infelizmente ñ tenho paciencia de fazer cabeçalhos tão divos igual os daqui.
    Bejos #May-Sun

    layrakauana.blogspot.com

    ResponderExcluir
  14. adoreeeei a dica flor, ajudou mt.. visita eu? http://braguete.blogspot.com.br/

    ResponderExcluir
  15. Muito legal as caixinhas, mais deu uma preguiça de personalizar kkkk.
    Jackie vc podia ensinar como fazer aqueles links que tem na pagina de Goodies.
    Kisses, Manu
    http://cindereladeallstaroficial.blogspot.com.br/

    ResponderExcluir
  16. Muito boom a dica .. seguindo voc Lindona !

    http://doiisdefevereiro.blogspot.com.br/

    Beijuuus :*

    ResponderExcluir
  17. Amei o tutu!
    Tava mesmo precisando urgente :)

    http://blogdaelaniia.blogspot.com.br

    ResponderExcluir
  18. Jackie, me salvou sua linda <3. Hahahahaha. Beijos e uma ótima semana!
    Blog: http://gibertolini.tk/

    ResponderExcluir
  19. Amei! Visite meu blog: http://coisasdeumagarotacrescidinha.blogspot.com.br/

    ResponderExcluir
  20. Vish bem que tu falou que é uma maracutaia, é bem complicadinho mas o resultado é perfeito. Kiss :*
    todadelicada.blogspot.com

    ResponderExcluir
  21. Awn, Jackie, que tutorial mais perfeito!

    Até Breve :3
    thingsto-all.blogspot.com/

    ResponderExcluir
  22. Eu também sempre quis saber como fazer essas caixas de pesquisas lindas aqui do JD, vc explicou direitinho, mas não sei fazer cabeçalhos bonitos e nem lidar direito com html e tenho medo de estragar tudo o meu blog, mas com certeza logo logo vou tentar fazer.

    Beijos!

    ResponderExcluir
  23. Parabéns pelo tutorial, viu? Muito bem explicado e o resultado é lindo *--* Hey, recebi um selo lá no meu Blog e quero repassar para você (: Se não aceitar, entra em contato comigo, pelo meu Blog. Até mais, Jackie!

    Aperta o Start

    ResponderExcluir
  24. Ótimo tutorial agora eu sei fazer essa caixa de pesquisa u.u kkk adorei muito fofo mesmo (jackie dream como sempre arrasando kkk)

    beeijos millah

    forget-dream.blogspot.com

    ResponderExcluir
  25. Eu errei tudo, sos. Vou tentar fazer de novo com mais calma!

    ResponderExcluir
  26. como sempre meus blogs nunca tem sas desgraça de código que raiva man -_- nunca tem oq eu preciso nos meu HTML tudo fdp msm -_- parece q ele faz pra me ferra ooo belezaa merece até um like -_- serio so prq quero arruma meu blog pra n fica lixo ele fica lixo -_- Puta de uma sorte a minha -_-

    ResponderExcluir

.