15 de fev. de 2013

Caixa de pesquisa personalizada

                  


Olha eu aqui de novo gente =). Agora vim com mais um tutorial que eu já devia ter postado á muito tempo, mais eu esqueci (¬¬ acho que já falei da minha leseira pra vocês) e a nossa seguidora Giovana acabou me lembrando. Ela pediu o tutorial de caixa de pesquisa personalizada. Bom, vou explicar pra quem não sabe o que é. Caixa de pesquisa é uma caixinha onde as pessoas podem pesquisar alguma postagem, página ou algo do tipo que esteja muito difícil de achar. Então, vamos ao tuto agora:



O resultado será esse aqui:


Vá no seu Blogger > Layout > Adicionar um Gadget > Escolha um gadget HTML/Java Script e nesse gadget cole esse código:

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

Onde está escrito Go, você pode colocar qualquer coisa, como ok, pesquisar, etc e depois disso salve. Agora vá no Modelo do seu blog > Editar HTML > Prosseguir > Aperte Ctrl + F e procure por }]]></b:skin> e acima dele cole esse código:


.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 */}






17 comentários:

  1. Muito útil esse tutorial, já o tinha visto em outro blog, mas não ocupei.
    Beijos
    neversaynever-believe.blogspot.com.br

    ResponderExcluir
  2. Olá, vim aqui avisar que o nome mudou flor! Se quiser dar uma passadinha acesse http://abusedorimel.blogspot.com.br/ (Também vou fazer umas reformas)!! Beijos

    ResponderExcluir
  3. mudei o nome do blog e link ,vc poderia editar esse post porfavor

    http://secretsofgirls22.blogspot.com.br/

    link

    nome ; Secrets of Girls

    ResponderExcluir
  4. Adorei o tutu,.. E bem facil e util..

    http://xopreguicaofficial.blogspot.com.br/

    Kiiss

    ResponderExcluir
  5. Oi pessoal
    Vim avisar do novo blog que está na area... é o
    entre-sedas-e-paetes.blogspot.com

    ResponderExcluir
  6. Aceita Afiliação? Aqui: http://garotaimperfeitaselenator.blogspot.com.br/ Amei seu blog <3

    ResponderExcluir
  7. Amei,muito útil e legal :3 Kisses
    http://www.sweet-andcrazy.blogspot.com

    ResponderExcluir
  8. Olá ):
    Não consegui colocar ):
    Alguém do blog faz Design? Bejs !

    ResponderExcluir
  9. Oi vim te convidar pra responder uma tag. Passa lá no meu blog e se gostar responda tá... Beijos

    ResponderExcluir
  10. - Amore faz um post com temas para tumblr ? Please? *-*

    ResponderExcluir
  11. Eu já tou seguindo seu blog amore! (Que amei muito) Segue o meu de volta? http://garotasqcurtemanime.blogspot.com.br/

    Obs: Ameiiii mto seu blog msm, muito kawaii :3

    ResponderExcluir
  12. Amei A caixinha é super linda talvez vou usar!
    Ótimo Post! Continue assim.
    Ah! Gostaria que você pudesse deixar uma marquinha em meu blog.
    Afinal, Participe do Sorteio de 1 Ano de MFF.
    By:Camis
    MundoFantásticoFeminino

    ResponderExcluir
  13. Oie Gabiíh desculpa-me ficar tão desconectada do seu blog mais é que to com uns problemas aki é isso espero que entenda aháh ii seu blog ta lindo esta fazerndo muito sucesso parabens flor

    ResponderExcluir
  14. Oii amei o blog e queria pedir pra q vc postasse um tutorial de como personalizar a sidebar,beijos♥
    blogmakeshine.blogspot.com

    ResponderExcluir
  15. Aie querida eu amei mais eu não conseguir dever ser que eu não entendi algumas coisinhas

    ResponderExcluir
  16. Ajudou muito <3' Visitem : Patricinha-Chik.blogspot.com <<< Blog no começo , começei ontem então ainda vou fazer ajustes , Bjokas ><'

    ResponderExcluir

Yoo cherry, espero ter gostado do post. Se quiser comentar, fique a vontade, mais antes siga estas regrinhas:

- Não aceito comentário "Seguindo, segue de volta?"
- Não fale palavrões.
- Criticas são bem vindas, desde de que sejam criticas objetivas.
- Deixe o seu blog, talvez eu queira vê-lo.
- Aceito tags e selinhos.

Espero que sigam as regras que são bem importantes.