9 de mai de 2016

Caixa de Pesquisa Personalizada - 4 modelos



Olá, hoje trago uma dica bem legal pra deixar o blog de vocês com uma carinha bem mais profissional, bom na verdade são quatro dicas, quatro modelinhos de caixa de pesquisa personalizada. 

Para usar não tem mistério, basta copiar o código da caixinha que você gostou, ir em modelo e colar em um gadget de HTML/JavaScript. 

Abaixo estão os quatro modelinhos que eu mesma personalizei pensando em diferentes tipos de blog, desde os mais cleans, modernos, até os mais cutes e femininos. Logo faço mais modelinhos e post aqui pra vocês aproveitaram bastante! Deixem dicas nos comentários também, ajuda muito á abrir as idéias na hora de criar.



MODELO 1

<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}

#search-form 
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
background-color: #fff;
overflow: hidden;
}
#search-text 
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #333333;
-webkit-border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
cursor: pointer;
}
</style>

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Digite sua pesquisa...' type='text'/>
<button id='search-button' type='submit'><span>Pesquisar</span></button>
</form>

</div>

MODELO 2

<style>
#searchbox {
width: 280px;
background: url(http://i.imgur.com/j43P4xk.png) no-repeat;
}

#searchbox input {
    outline: none;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #f2f2f2 !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}

#button-submit{
background: url(http://4.bp.blogspot.com/-4MYBYE0i0Xk/VEQYlljvriI/AAAAAAAAAlQ/_TRkRG5EX1c/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}

#button-submit:hover {
background: url(http://4.bp.blogspot.com/-6S4K8eHPM-c/VEQdf7l84GI/AAAAAAAAAls/j7_kGSpkIfg/s1600/search-icon-hover.png);
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Digite o que procura" />
<input id="button-submit" type="submit" value=" "/>
</form>

MODELO 3

<style>
#searchbox {
width: 280px;
background: url(http://i.imgur.com/xKn6CB6.png) no-repeat;
}

#searchbox input {
    outline: none;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #fff !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}

#button-submit{
background: url(http://4.bp.blogspot.com/-4MYBYE0i0Xk/VEQYlljvriI/AAAAAAAAAlQ/_TRkRG5EX1c/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}

#button-submit:hover {
background: url(http://4.bp.blogspot.com/-6S4K8eHPM-c/VEQdf7l84GI/AAAAAAAAAls/j7_kGSpkIfg/s1600/search-icon-hover.png);
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Digite o que procura" />
<input id="button-submit" type="submit" value=" "/>
</form>

MODELO 4

<style>
#searchbox {
width: 280px;
background: #33CCCC;
}

#searchbox input {
    outline: none;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #fff !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}

#button-submit{
background: url(http://4.bp.blogspot.com/-4MYBYE0i0Xk/VEQYlljvriI/AAAAAAAAAlQ/_TRkRG5EX1c/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}

#button-submit:hover {
background: url(http://4.bp.blogspot.com/-6S4K8eHPM-c/VEQdf7l84GI/AAAAAAAAAls/j7_kGSpkIfg/s1600/search-icon-hover.png);
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Digite o que procura" />
<input id="button-submit" type="submit" value=" "/>
</form>

E ai gostaram? Espero que sim, beijos e até a próxima!

Lembrando que trabalho com layouts por encomenda para Blogger, vinhetas e arte da capa para canal, logotipos, mídiakits e muito mais, para solicitar orçamento basta enviar um e-mail para agencialusadigital@hotmail.com ou deixar seu e-mail nos comentários (ele não será publicado, só eu irei ver).

7 comentários :

  1. ahhh, amei! Obrigada pela dica, já até troquei minha caixinha de pesquisa por essa, só alterei a cor! Beijos!!

    www.umaloucaporjesuscristo.com

    ResponderExcluir
  2. Rocky vc salva vidas kkkkkk sério estou usando a caixinha numero 1 no meu blog muuito obrigada <3

    http://tinafalando.blogspot.com.br/

    ResponderExcluir
  3. Rocky obrigadão ! Funcionou perfeitamente, mudei um pouco as cores e o tamanho <3

    http://unperfect-design.blogspot.co.uk/

    ResponderExcluir
  4. Olá Rocky, tudo bem?
    Vem cá linda, você desospedou as imagens? Pois nenhuma está pegando corretamente (o fundo)

    ResponderExcluir
  5. Olá Rocky td bem? amei ficou lindo no meu blog obrigada bjs

    ResponderExcluir