Modelos para caixa de pesquisa


Buenas meus amores ヾ(๑’౪`๑)ノ゙ Como vão todos hein? Nossa, que hiatus demorado esse né? UAHSuahsuahsuahs Tipo eu previa que iria ficar muito mais tempo mas como as coisas já voltaram ao normal não teria o porque de deixar o blog desatualizado não é mesmo? Voltei também o meu blog pessoal que estava largado as traças e fiz um post bem legal, quem quiser dar uma conferida clique aqui. Então, vi que a ask ficou bem morta mesmo e acredito que foi pelo motivo do hiatus, como eu não tinha ideia do que postar resolvi criar algo que muita gente usa e pede em blogs de html que são as caixinhas de pesquisa. Agora que voltei meus amores podem voltar a pedir na minha ask certo? Estou a mil e com bastante vontade de ajudar e com algumas ideias novas, em outro momento irei compartilhar essas ideias com todos aqui e acredito que será bem legal e algo que terá um bom retorno! Kiss =3


PARA VER MELHOR AS IMAGENS CLIQUEM NELAS ٩(✿∂‿∂✿

Gente, a única coisa que vocês precisam mexer é no tamanho da caixa pois cada um tem uma sidebar de tamanho diferente, então só mexa no tamanho das caixas certo?

Modelo verde

.search{
float: center;
font-family: Calibri;
font-size: 10px;
}
.searchbar{
width: 170px;
height:10px;
line-height:10px;
background: #EFF7E9;
border: 1px solid #CBDCBE;
box-shadow: inset 0 0 10px #D0DFC5;
padding: 8px 8px 8px 8px;
font-family: Calibri;
font-size: 10px;
color: #BFD2B1;
text-shadow: 1px 1px 1px #FFF;
-webkit-border-radius: 100px;
-webkit-border-bottom-right-radius: 1px;
-moz-border-radius: 100px;
-moz-border-radius-bottomright: 1px;
border-radius: 100px;
border-bottom-right-radius: 1px;
}
.searchbut{
width: 50px;
height:28px;
background: #EFF7E9;
border: 1px solid #CBDCBE;
box-shadow: inset 0 0 10px #D0DFC5;
padding-top: 20px 8px 8px 8px;
font-family: Calibri;
font-size: 10px;
color: #BFD2B1;
text-shadow: 1px 1px 1px #FFF;
-webkit-border-radius: 100px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius: 100px;
-moz-border-radius-bottomleft: 1px;
border-radius: 100px;
border-bottom-left-radius: 1px;
}

 Modelo lilás

.search{
float: center;
font-family: Calibri;
font-size: 10px;
}
.searchbar{
width: 182px;
height:15px;
line-height:10px;
background: #EEE4F2;
border: 1px solid #CBB4D5;
box-shadow: inset 0 0 10px #D7BEE2;
padding: 8px 8px 8px 8px;
font-family: Calibri;
font-size: 10px;
color: #C4ADCE;
text-shadow: 1px 1px 1px #FFF;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.searchbut{
width: 38px;
height:34px;
background: #EEE4F2;
border: 1px solid #CBB4D5;
box-shadow: inset 0 0 10px #D7BEE2;
padding-top: 8px 8px 8px 8px;
font-family: Calibri;
font-size: 10px;
color: #C4ADCE;
text-shadow: 1px 1px 1px #FFF;
border-radius:100%;
-webkit-border-radius:100%;
-webkit-border-radius:100% 100% 0% 100%;
-webkit-border-radius: 100px;
}

Modelo rosa

.search{
float: center;
font-family: Calibri;
font-size: 10px;
}
.searchbar{
width: 182px;
height:15px;
line-height:10px;
background: #FFE6E6;
border: 1px solid #FBC3C3;
box-shadow: inset 0 0 10px #FCC2C2;
padding: 8px 8px 8px 8px;
font-family: Calibri;
font-size: 10px;
color: #FFC1C1;
text-shadow: 1px 1px 1px #FFF;
-webkit-border-radius: 2px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius: 2px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-radius: 2px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.searchbut{
width: 38px;
height:34px;
background: #FFE6E6;
border: 1px solid #FBC3C3;
box-shadow: inset 0 0 10px #FCC2C2;
padding-top: 8px 8px 8px 8px;
font-family: Calibri;
font-size: 10px;
color: #FFC1C1;
text-shadow: 1px 1px 1px #FFF;
-webkit-border-radius: 2px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius: 2px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-radius: 2px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}

Código para por no gadget:

<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="Press and enter" />
<input class="searchbut" type="submit" value="Go" />
</form>
Querem ver os perfis de quem posta aqui? cliquem na imagem᠉
Continue

11 comentários:

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
  2. Heey ( ´ ▽ ` )ノ Estou bem, obrigada asçlakas. Adorei as caixas de pesquisa. Estarei aguardando você compartilhar suas ideias ~curiosa *u*~
    Beijos | Counting Stars

    ResponderExcluir
  3. Ainda beem que está de voolta \o/\o/
    Eu amoo seus tutos e sim quando eu pensar em algo eu peço em sua ask pois eu preciso e muuito.
    Adorei os modelinhos, ficaram as coisas mais fofas :3 e vou favoritar.

    Beijos <3
    http://www.p-perfectsthings.com/ | Quietly Pink

    ResponderExcluir
  4. Vou dar uma olhada no post
    Que bom que você voltou logo, haha. E que lindos esses modelos!

    Chu~ Tiffany, back-hug.blogspot.com

    ResponderExcluir
  5. que bom que voltou *--* cara eu amo suas caixinhas de pesquisa, são muito lindas, amei tdas!

    http://kawaii-t.blogspot.com.br/

    ResponderExcluir
  6. Você está de volta!! É verdade, caixas de pesquisa são bem úteis mesmo, apesar de eu não usar uma no meu blog hahahahahaha. Adorei todos os modelos, são especialmente lindos <33
    Bjoss,
    Conheça o Blog!

    ResponderExcluir
  7. Eu também tive um hiatus bem feio lá no blog, mas eu acabei voltando já, eu fiquei acho que desde outubro até essa semana...
    Gente do céus amado, que caixinhas são essas? Sinceramente? Adorei mesmo, sem brincadeira, qualquer dia eu uso elas ÇoÇ.
    Bye ~
    Visite: http://blue-velt.blogspot.com.br/

    ResponderExcluir
  8. conheci seu blog hoje <3 muito fofo cara hehehe parabens pelo sucesso e curti o post <3
    http://onedithings.blogspot.com.br/

    ResponderExcluir
  9. ownt <3 ficaram muito lindos *-*

    Visite se quiser cosa linda!

    http://blogonlymydreams.blogspot.com.br/

    ResponderExcluir
  10. Olha Toh , não tem seu layout black honey? Eu usei como BASE , mais coloquei os devidos créditos. Aqui está
    http://gaby-xuxu.blogspot.com.br/

    ResponderExcluir
  11. São lindas *0*

    http://euamotutoriais.blogspot.com.br/

    ResponderExcluir

Olá meus amores, os comentários devem ser direcionados somente ao blog e não a vida pessoal de ninguém! Qualquer dúvida peça pela Ask que responderei o mais rápido possível. Anônimo não adianta vir xingar pelos comentários que antes de mesmo de pensar em me ofender eles serão excluídos! Não gosto de tags, se quiser fazer fique a vontade mas não irei retribuir, não curto seguindo segue de volta =/ mas posso seguir se gostar realmente do blog, não julgo por layout ou por seguidores, avalio o blog e como disse se eu curtir é claro que sigo, afiliações? Peça nos comentários pois se pedir em outro lugar no caso páginas é bem provável que eu não veja! Então meus lindos espero que curtam cada cantinho do meu bloguinho e voltem sempre! kissus (*^3^)

Layout e codificação por Roh A.Ramos Os blogs que mais ajudaram com os tutoriais foram: CHIHDVCA Tecnologia do Blogger ♡ 2012 a 2017