13 de dezembro de 2013

Caixa de pesquisa Personalizada - I.

||



Olá amores, tudo bem com vocês? Bom, não tenho nada para contar, só tenho um aviso: amanhã eu irei para o shopping, lá vou comprar uns livros, brincar com as minhas amigas, comer etc. Elas vão dormir aqui, então se o blog ficar sem postagens, desculpe :/ Como vai a sua sexta feira 13? Eu realmente não vejo nada de diferente, é só mais um dia, qual é a coisa ruim ou estranha nesse dia? Eu sempre quis saber o porque de a sexta feira 13 ser chamada de sexta do terror, sabe? Acho que teve ser marketing, ou coisa da igreja católica, ou talvez lendas do povo antigo. Acho que é alguma lenda grega.

Enfim, hoje eu trouxe uma caixa de pesquisa bem simples para vocês. Eu aprendi ela lá no Firefiles (Esse nome me lembra firework, não sei o porque, eu sempre assimilo firefiles com firework), tá? Ela é simples, não tem nem botão, é só a caixa mesmo. Mas ela é bonitinha e arrumadinha, fica fofa com a cor certa. Enfim, vejam ela aqui (onde tem menu para tags - I, abaixo do menu). Gostaram? Para saber como usá-la, continue lendo.

Vá para o painel do seu blog, modelo, editar HTML e pesquise por "]]></b:skin", ACIMA dessa tag, cole o seguinte código:
/*------ Caixa de pesquisa (Etc For Me) ------*/
.search{
float: center;
font-family: PF Arma Five; sans serif;
}
.searchbar{
margin-left: -5px;
margin-top: 3px;
height: 20px;
width: 210px;
-webkit-transition-duration: .50s;
text-align: center;
color: #fff;
background: #cordofundodacaixadepesquisa;
font: 8px PF Arma Five;
border: 1px solid  #cordabordadacaixadepesquisa;
outline: none;
-moz-box-shadow:inset 0 0 5px #cordasombradacaixadepesquisa;
-webkit-box-shadow:inset 0 0 5px #cordasombradacaixadepesquisa;
box-shadow:inset 0 0 5px #cordasombradacaixadepesquisa;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow:0 0 1em #fff;
}
.searchbar:hover{
color:#fff;
height: 15px;
-webkit-transition-duration: .50s;
background:  #fundodacaixadepesqusisaemhover;
border: 1px dashed  #cordabordadacaixadepesquisaemhover;
outline: none;
-moz-box-shadow:inset 0 0 5px #cordasombradacaixadepesquisaemhover;
-webkit-box-shadow:inset 0 0 5px #cordasombradacaixadepesquisaemhover;
box-shadow:inset 0 0 5px #cordasombradacaixadepesquisaemhover;
-webkit-box-shadow:0 0 1em #fff;
}
.searchbut{
background:;
width:0px;
height:0px;
border: 0;
padding:0px;
}
/*------ Caixa de pesquisa (Etc For Me) ------*/
Depois de arrumar o código como pede (mudando onde diz no próprio código), salve o modelo. Quando salvar, vá em layout, adicionar novo gadget e coloque o seguinte código:
<center> <form action="/search" class="search" method="get"> <input class="searchbar" id="s" name="q" placeholder='' type="text" value="pesquise aqui" /> <input class="searchbut" type="submit" value="" /> </form> </center>
E pronto! A sua caixa de pesquisa personalizada já está em seu blog. Para mudar o texto que fica na caixa de pesquisa, mude o "pesquise aqui" que tem no código em cima. Enfim, espero que tenham gostado do tutorial, como sempre, lógico que pode reblogar, mas com os créditos. Se vocês verem alguém reblogando algo daqui sem os créditos, por favor, me avisem. Ah, uma coisa: Talvez ela fique meio torta no seu blog, é por causa do height. Arrume o height se ela ficar meio torta, o arrume até que fique legal :3

29 comentários:

  1. Ficou mega show! Vou usar no meu próximo layout. Posso mudar a cor? Seu blog é lindo :)

    Segue? http://golden--resources.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Muito obrigada :3 Claro que pode, é para mudar. Haha, e ainda mais, não tem nem cor no código.

      Excluir
  2. Hehe, não entendo de sexta feira 13 lol. Vou bem tbm >\\< Aproveita o shopping haha ~~
    Ótimo tutu o/
    Xoxo ~
    mutant-paradise.blogspot.com

    ResponderExcluir
    Respostas
    1. Awn, muito obrigada mesmo <3 Claro que vou aproveitar, é shopping! Hahaahhaha

      Excluir
  3. Awwn que linda, gostei mesmo, acho que vou usar ein *u* ASUASUH


    htmlandresources.blogspot.com.br

    ResponderExcluir
  4. Fica bem fofinho adorei, minha sexta-feira 13 ta mais ou menos shuhus !

    Vanessa Tutoriais~

    ResponderExcluir
    Respostas
    1. Valeu :) Que seja para mais do que para menos, ahahhaha.

      Excluir
  5. Legal a caixa de pesquisa, gostei :) Kiss, Radioactive

    ResponderExcluir
  6. Fofinha a caixa de pesquisa *-*

    O shopping da minha cidade é tão sem graça e.e

    ResponderExcluir
    Respostas
    1. Obrigada :3 Sério? Ele tem Saraiva ou Escariz? O meu também é, mas as livrarias o salvam.

      Excluir
    2. Saraiva? Escariz? kkkkkkkk parece até piada, não tem nada disso aqui, nem livraria, nem loja de roupas com preços que dá pra pagar. É muito sem graça

      Excluir
    3. Meu Deus, que chato :( Sinto muito, teve ser triste. Acho que nem MC Donald´s teve ter.

      Excluir
  7. Adorei a caixa de pesquisa! Estão construindo um shopping aqui na minha cidade, tá ficado gigantesco, ano que vem já tá pronto *3* Acho que amanhã também vou passear e.e

    www.whatnae.com

    ResponderExcluir
    Respostas
    1. COMO ASSIM SUA CIDADE NÃO TEM SHOPPING? Nossa, se eu estiver enganada, mil desculpas, mas a sua cidade não tem shopping? Nossa. Como você vai ao cinema? Enfim, obrigada :3 Todos passeiam, haha.

      Excluir
  8. Adorei a caixa de pesquisa, muito legal >3<
    Bjs, Jubs ~ l-iterando

    ResponderExcluir
  9. Adorei a caixinha de pesquisa, bem lindinha <3
    Shopping? Divirta-se <3
    Kiss
    With You

    ResponderExcluir
  10. Owwn que fofa <3 e bem kawaii
    candytendy.blogspot.com

    ResponderExcluir
  11. Está muito fofinha, bem diwa.
    Gostei muito, acho que vou usar no proximo lay.
    Beijos

    ResponderExcluir

  12. Olá!!!, Deus seja contigo, tenha um final de semana abençoado,
    amiga que linda amei SUCESSO AMIGA.
    Blog: http://arrasandonobatomvermelho.blogspot.com.br/
    Canal de youtube: http://www.youtube.com/NekitaReis

    ResponderExcluir
  13. Nossa! Amei a caixa de pesquisa, muito linda e o tutorial está bem explicado, acho que todos conseguirão usar sim :)
    Fiz a postagem que você me pediu no formulário, depois dá uma olhadinha. Seu blog a cada dia fica mais divo o/

    Bjoon

    Adolescente Nerd

    ResponderExcluir

Vai comentar? Obrigada Mas antes, leia por favor:

Os comentários são moderados para eu saber quem comentou, assim posso retribuir, somente por isso ok? Pode comentar o que quiser, até criticas e ofensas, mas mantenha o respeito.
Leia o post todo antes de comentar, não comente apenas para divulgar o seu blog.
Se for colocar o link do seu blog, coloque sem o "https://", pois o blogger considera spam.
Não precisa comentar "Seguindo, segue de volta?" Se eu gostar, eu sigo.
O resto pode fazer :3 Mas tenha respeito.

Obrigada novamente