Hooy gente 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 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...
1° 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á?
2° Agora você vai colocar o cabeçalho no template seguindo esse tutorial do trechy teen (www), ou pode ser do seu jeito (se preferir).
3° 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
4° 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!
5° 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;">Você pode alterar os números grifados de vermelho pra ajustar a caixa de busca.
<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>
padding-right: equivale á margem direita;
padding-left: equivale á margem esquerda;
padding-top: equivale á margem de cima;
padding-bottom: equivale a margem de baixo
6° 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:
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)
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
Inté bye bye amores <3
Ah guria , até que esse tutorial não é essa "maracutaia" toda que você falou, hausha (:
ResponderExcluirFicou 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/
Gente eu nao entendi nadica de nada help aqui plis !
ExcluirVisitem meu blog: http://blogueiramaluca.blogspot.com.br/
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 !
ResponderExcluirnaidadeteen.blogspot.com
Nossa!!1
ResponderExcluirseu 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
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.
ResponderExcluirAmei. bj
Ah, é bem fácil sobrinha u.u Um truque tão simples e ninguém percebia, why god :o
ResponderExcluirparadise-goodies.blogspot.com
Caramba tem que se dedicar, pra conseguir esse efeito! Mas com certeza vale a pena!
ResponderExcluirAmei o tutorial! Acho linda essa caixa de pesquisa!
Bjo, Sel ;*
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 ^^
ResponderExcluirfashion em cores -com
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!
ResponderExcluirsolteiras-noivas-casadas.blogspot.com
♥
Eu sou a prova de que você ficou a tarde tida fazendo o TUTU' e claro que o resultado fou incrível >.<
ResponderExcluirOs seus layouts são lindos e divos, e seus tutoriais bem lindos e uteis, o que seria da gente sem vc?!
ResponderExcluir-Beijos ^^//
cotidianodeumabarbie.blogspot.com
Adorei, sempre quis saber como você fazia as suas caixas de pesquisa, eu só não consegui entender :/
ResponderExcluirQue amor o tuto! Pena que já tenho a minha caixa de pesquisa, mas essa é tão fofa...
ResponderExcluirBjs
garotas-cupcakes.com
Sim esse tuto é demais mesmo, mais infelizmente ñ tenho paciencia de fazer cabeçalhos tão divos igual os daqui.
ResponderExcluirBejos #May-Sun
layrakauana.blogspot.com
adoreeeei a dica flor, ajudou mt.. visita eu? http://braguete.blogspot.com.br/
ResponderExcluirMuito legal as caixinhas, mais deu uma preguiça de personalizar kkkk.
ResponderExcluirJackie vc podia ensinar como fazer aqueles links que tem na pagina de Goodies.
Kisses, Manu
http://cindereladeallstaroficial.blogspot.com.br/
Muito boom a dica .. seguindo voc Lindona !
ResponderExcluirhttp://doiisdefevereiro.blogspot.com.br/
Beijuuus :*
Amei o tutu!
ResponderExcluirTava mesmo precisando urgente :)
http://blogdaelaniia.blogspot.com.br
Jackie, me salvou sua linda <3. Hahahahaha. Beijos e uma ótima semana!
ResponderExcluirBlog: http://gibertolini.tk/
Amei! Visite meu blog: http://coisasdeumagarotacrescidinha.blogspot.com.br/
ResponderExcluirVish bem que tu falou que é uma maracutaia, é bem complicadinho mas o resultado é perfeito. Kiss :*
ResponderExcluirtodadelicada.blogspot.com
Awn, Jackie, que tutorial mais perfeito!
ResponderExcluirAté Breve :3
thingsto-all.blogspot.com/
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.
ResponderExcluirBeijos!
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!
ResponderExcluirAperta o Start
Ótimo tutorial agora eu sei fazer essa caixa de pesquisa u.u kkk adorei muito fofo mesmo (jackie dream como sempre arrasando kkk)
ResponderExcluirbeeijos millah
forget-dream.blogspot.com
Eu nessesito desses seus templantes
ResponderExcluirEu errei tudo, sos. Vou tentar fazer de novo com mais calma!
ResponderExcluircomo 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 -_-
ResponderExcluirNão consegui :'( Mas amo seu blog
ResponderExcluirMuito bom, ameeii demais '
ResponderExcluir