sexta-feira, 20 de setembro de 2013

Caixa de Pesquisa Personalizada

Oioi meus amados dreamers, como estão? Eu estou bem, obrigada hahaha. Como eu ando sumidinha daqui, eu decidi trazer coisas bacanas pra vocês, ai pensei logo em uma caixa de pesquisa. Eu fiz e achei bem fofinha, então espero que vocês usem. São 8 cores diferentes, é só você escolher a cor que mais gosta e usar... Vamos lá?

Cor 1 - Exemplo

.search{
float: center;
}
.searchbar{
height: 33px;
width: 200px;
border-radius: 1px;
background: url('http://static.tumblr.com/gpjscyh/HWqmtec3u/1.png') no-repeat;
text-align:left;
color:#ffffff;
border: 1px solid #e6a6d0;
text-shadow: 1px 1px 0px  #be85a8;
font-family: verdana;
font-size: 9px;
letter-spacing: 1px;
}
.searchbut{
background: url('');
width:1px;
height:31px;
border: 0;
}




Cor 2 - Exemplo

.search{
float: center;
}
.searchbar{
height: 33px;
width: 200px;
border-radius: 1px;
background: url('http://static.tumblr.com/gpjscyh/ulCmteclx/2.png') no-repeat;
text-align:left;
color:#ffffff;
border: 1px solid #39a28f;
text-shadow: 1px 1px 0px  #257365;
font-family: verdana;
font-size: 9px;
letter-spacing: 1px;
}
.searchbut{
background: url('');
width:1px;
height:31px;
border: 0;
}



Cor 3 - Exemplo

.search{
float: center;
}
.searchbar{
height: 33px;
width: 200px;
border-radius: 1px;
background: url('http://static.tumblr.com/gpjscyh/lWemtecm5/3.png') no-repeat;
text-align:left;
color:#ffffff;
border: 1px solid #cd6d9a;
text-shadow: 1px 1px 0px  #914669;
font-family: verdana;
font-size: 9px;
letter-spacing: 1px;
}
.searchbut{
background: url('');
width:1px;
height:31px;
border: 0;
}


Cor 4 - Exemplo

.search{
float: center;
}
.searchbar{
height: 33px;
width: 200px;
border-radius: 1px;
background: url('http://static.tumblr.com/gpjscyh/9romtecre/4.png') no-repeat;
text-align:left;
color:#ffffff;
border: 1px solid #9073c2;
text-shadow: 1px 1px 0px  #604a87;
font-family: verdana;
font-size: 9px;
letter-spacing: 1px;
}
.searchbut{
background: url('');
width:1px;
height:31px;
border: 0;
}


Cor 5 - Exemplo

.search{
float: center;
}
.searchbar{
height: 33px;
width: 200px;
border-radius: 1px;
background: url('http://static.tumblr.com/gpjscyh/XA5mtecrl/5.png') no-repeat;
text-align:left;
color:#ffffff;
border: 1px solid #adcd6d;
text-shadow: 1px 1px 0px  #708841;
font-family: verdana;
font-size: 9px;
letter-spacing: 1px;
}
.searchbut{
background: url('');
width:1px;
height:31px;
border: 0;
}


Cor 6 - Exemplo

.search{
float: center;
}
.searchbar{
height: 33px;
width: 200px;
border-radius: 1px;
background: url('http://static.tumblr.com/gpjscyh/dl5mtecw9/6.png') no-repeat;
text-align:left;
color:#ffffff;
border: 1px solid #cb8f6a;
text-shadow: 1px 1px 0px  #8b6147;
font-family: verdana;
font-size: 9px;
letter-spacing: 1px;
}
.searchbut{
background: url('');
width:1px;
height:31px;
border: 0;
}


Cor 7 - Exemplo

.search{
float: center;
}
.searchbar{
height: 33px;
width: 200px;
border-radius: 1px;
background: url('http://static.tumblr.com/gpjscyh/UOHmtecyl/7.png') no-repeat;
text-align:left;
color:#ffffff;
border: 1px solid #77a9c4;
text-shadow: 1px 1px 0px  #527a90;
font-family: verdana;
font-size: 9px;
letter-spacing: 1px;
}
.searchbut{
background: url('');
width:1px;
height:31px;
border: 0;
}


Cor 8 - Exemplo

.search{
float: center;
}
.searchbar{
height: 33px;
width: 200px;
border-radius: 1px;
background: url('http://static.tumblr.com/gpjscyh/dVWmted0v/8.png') no-repeat;
text-align:left;
color:#ffffff;
border: 1px solid #c07ac1;
text-shadow: 1px 1px 0px  #884f89;
font-family: verdana;
font-size: 9px;
letter-spacing: 1px;
}
.searchbut{
background: url('');
width:1px;
height:31px;
border: 0;
}

Para colocar no blog, copie o código da caixinha que você deseja, e coloque acima de  ]]></b:skin> no seu html. Em seguida, crie um gadget html/java script e cole dentro dele o código abaixo:

<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" placeholder=' ' type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>
E por hoje é só. Espero que vocês tenham gostado, fiz com carinho e achei super bonito como ficaram os resultados nas diversas cores e etc. Beijos e até logo meus amores.

32 comentários:

  1. Gostei muito das caixinhas, muito fofas :3
    beijos, boa sexta-feira!
    quemprecisadetvparaverbeyonce.blogspot.com.br

    ResponderExcluir
  2. Ai que talentosa ! Haha ¬ Provavelmente vou usar a 1º opção , achei fofa ♥
    Licença , Nana Divosa passando na área , u_u

    ~Beijocas na xexa~
    Chá de Boneca

    ResponderExcluir
  3. Nossa Nana que fofo, fiquei até empressiona pois dessa vez você colocou uma descrição menorzinha, mais não comento isso por ser um problema, rs. Adorei demais, vou usar no Layout que irei fazer, estou comentando rapidinho pois estou na escola, depois faço um segundo comentário :3

    Eloísa do Having Cherry || Aguardo sua visita

    ResponderExcluir
  4. Adorei a dica <3
    Beijos.

    garotamodamh.blogspot.com

    ResponderExcluir
  5. Adorei ! As bolinhas ficaram muito cute, assim dando numa caixinha diva <3

    ~Bye
    Explosion of Paradise

    ResponderExcluir
  6. Ótimas caixinhas , com certeza irei usar
    http://mysecrets7.blogspot.com.br/

    ResponderExcluir
  7. Que caixinhas lindas, meu Deus! Amei mesmo, vou usar uma delas no meu próximo layout! ^^

    Jovens Gordinhas
    Unicórnio com Bigode

    ResponderExcluir
  8. Annnnnnnnnnw Nana, sua diwa! Que perfeitas essas caixinhas, sério! Tu é tão fofa e esforçada que ainda fez 8 modelos de cor, anw! Obrigada,
    Beijos ♡ ~
    Garotas Atrevidas ~ retribui a visita? >3<

    ResponderExcluir
  9. Obriiiigada pela dica. Amei seu blog.
    A dica vai ser muito util pra mim.
    Beijoos <3
    http://do-seu-jeito.blogspot.com.br/

    ResponderExcluir
  10. Quantas caixinhas lindas Nana! :3 Gostei muito da rosinha.

    Beijos da Lets | Vida de uma SONE

    ResponderExcluir
  11. Geeeeeeeeeeente, que perfeita! É bem diferente das demais caixinhas, adorei, e com certeza, vou usar no próximo lay do BUG! hahaha :33 Obrigada!
    Muitas beijocas com glacée e glitter parisiense!
    BUG- bonjour-uneglacee.blogspot.com

    ResponderExcluir
  12. Awwwn, gostei demais! ^^ Pena que eu acabei de mudar o layout do blog... Mas gostei tanto que acho que vou usar no próximo!
    Beijos!

    O blog mudou de nome: SubitaMente!

    ResponderExcluir
  13. Muito lindas Nana ! Porque tu tá sumindo do blog ? Bjs, Dazzle ♥

    ResponderExcluir
  14. Faz parceria?? Bjs

    http://delicategirloficiiial.blogspot.com.br/

    ResponderExcluir
  15. Anda sumida mesmo!
    Lindas caixas de pesquisa, lindas e originais! Gamei na 4!

    Com carinho, Ammy | SEMPRE FUI ESTRANHA

    ResponderExcluir
  16. Gostei do tutorial, pena que eu ja tenho a minha personalizada :(
    blog-chiclete-colorido.blogspot.com
    gz-geracaozombie.blogspot.com

    ResponderExcluir
  17. lindas demais ............... e muito fofas.........

    SG // postagensparavc.blogspot.com

    ResponderExcluir
  18. Que lindas Nana, eu amei *o*
    Tu tá sumida mesmo, sinto falta dos seus ótimos postes.
    Ah, não fiz a torta mas inventei umas com coisas que eu gosto e até que ficou mais ou menos.
    Beijos Brenda do gave crazy

    ResponderExcluir
  19. Mesmo não sendo meu estilo, são lindass e muito fofinhas ♥ Adorei haha.
    Beijos ♡
    Sim Senhorita (Clique aqui ou no perfil)
    @SiimSenhorita

    ResponderExcluir
  20. LIndo linduu *----*
    Bijus
    confienounicornio.Blogspot.com ♥

    ResponderExcluir
  21. Amei todas flor! Você é muito criativa seu blog é perfeito! Convido você e todas suas leitoras para conhecerem o meu cantinho! talytaxavier.blogspot.com.br

    ResponderExcluir
  22. Tão lindas e fofas!
    Beijocas, Lili ;3
    Clique aqui, e vá para o blog / Princesa Teen!
    Meu Instagram / Me segue?!

    ResponderExcluir
  23. Que Blog mais perfeito amor!! :3 Lindo demais! Parabéns!

    ADM Cath do Gave Crazy. Beijos <3

    ResponderExcluir
  24. São adoráveis as caixas e o fundo bastante original. Adorei o exemplo da cor dois e três. São perfeitas!
    querosabertudo-k.blogspot.com

    ResponderExcluir
  25. Que lindas Nana! Assim não te, lay que fique sem caixa de pesquisa, é sumida mesmo mais eu entendo tá cada vez mais difícil manter um blog pra todo mundo por falta de tempo. É uma pena porque além de materiais lindos você posta coisas super interessantes, que eu amo ler!

    Mundo de Liina

    ResponderExcluir
  26. Amei as caixinhas <3
    Quem sabe um dia eu use?hahah
    http://mygoodies1.blogspot.com.br/

    ResponderExcluir
  27. no meu blog não pegou este codigo

    ResponderExcluir
  28. usando haha obg <3

    docedeframboesa.blogspot.com

    ResponderExcluir
  29. Achei elas bem fofas ! Kiss, Wanted Dream

    ResponderExcluir
  30. Rebloguei, mais coloquei o crédito, kiss <3

    ResponderExcluir

1 ♥ Leio e respondo todos os comentários. Sim, vou retribuir a visita, dependendo do que comentar aqui. Vir aqui só pra pedir pra eu visitar ou seguir é o que não dá, né?

2 ♥ Sem comentários ofensivos, ok? Se tem uma crítica construtiva, pode dar, mas se não for tão importante assim, guarde pra você mesmo. As vezes é bem melhor do que sair ofendendo as pessoas.

3 ♥ Muito obrigada por comentar no meu blog, e obrigada também pela sua visita. Saiba que é muito importante pra mim. Ah, não esqueça de deixar o endereço do seu blog! ^^