30 de mar. de 2013

Tutorial: caixa de busca personalizada


Hello cutes! Tudo bem? Vocês devem ter percebido a minha ausência aqui, não é? Mas dessa vez eu vou voltar com tudo e com vários utilitários para vocês! Bom, o tutorial de hoje é de como personalizar a caixa de busca do blog. Cliquem em leia mais e vejam o post completo :)



Primeiramente vá em Layout  Adicionar um gadget HTML/JavaScript
<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>

Agora vá no HTML do seu blog  procure por ]]></b:skin>  acima dele cole:
.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 */
}

Edite os códigos destacados, visualize e se estiver tudo okay salve! 
Lembrando que este tutorial é da Anny do Go Imagines

15 comentários:

  1. http://bia-aguida.blogspot.com.br/2013/03/pascoaaa.html

    ResponderExcluir
  2. Oi Isa!! Eu tenho procurado há um tempo um tutorial de como colocar uma apresentação de slides no cabeçalho, como no seu. Você poderia fazer um tuto desse? Estou procurando faz tempo mas não acho! Obrigada, beijos.
    Emily (Sorriso Met4lico)

    ResponderExcluir
  3. Adorei o tutorial! Linda, vou por no blog.
    xoxo

    -Califórnia Girl-

    ResponderExcluir
  4. Já conhecia, é bem fácil e fica lindo o resultado :3

    Voltamos e com um novo layout no ar, confira lá.
    Beijocas, I'm Fucking a Zombie. @pfvrsah (instagram)

    ResponderExcluir
  5. Adorei o tutorial!! Super útil! :)
    www.believe--me.blogspot.com

    ResponderExcluir
  6. Que lindo chuhu adorei o tutorial. (:

    blogchuvasdenovembro.blogspot.com

    ResponderExcluir
  7. Valeu pela dica. Ajudou muito. ^^

    www.tipocasual.com

    ResponderExcluir
  8. kk adooreii o/
    véy como seu layout ta incrivel ameii demaisss o/
    acervo-de-livros.blogspot.com

    ResponderExcluir
  9. Amei, eu nem sabia fazer isso, eu vou fazer o teste pra ver como a minha vai ficar O_O' obriigada *u*


    siteiloveit.blogspot.pt

    ResponderExcluir
  10. Usar caixa de pesquisa é bom, pois facilita a navegação do leitor, né?
    Ótimo tutorial!
    Beijos <3
    pqngarota.blogspot.com

    ResponderExcluir
  11. Aeeen, que fofa *U* ~~ amo caixas de pesquisas... sempre quando vejo um blog sem um desses fico triste UHAUHUHEUHUHUAS ♥

    Beijos Isa <33

    http://tentando-esquecer.blogspot.com

    ResponderExcluir
  12. Aiin, que tutorial perfeito. Vou colocar no meu blog !
    Beijooos .*
    http://a-titudesimperfeitas.blogspot.com.br/

    ResponderExcluir
  13. Muito fofa, ameu seu blog tem um tutoriais bem uteis e diferentes.
    Seguindo ><

    Amigas

    ResponderExcluir
  14. Gostei do tutorial!!!
    http://chovendoemp-a-r-i-s.blogspot.com.br/

    ResponderExcluir

LEIA ANTES DE COMENTAR
-não faço parcerias, apenas afiliações
-"segue meu blog" ou "seguindo, segue de volta" - só seguirei os blogs que eu realmente gostar, okay?
-não aceito tags nem selinhos
-deixe o link do seu blog no fim do comentário para que eu possa retribuir a visita