Caixas de pesquisa personalizadas para blog


Escolha a melhor caixa de pesquisa para seu blog e instale-a com muita facilidade.

Hoje apresentamos a você que sempre se liga no Dica de Blog algumas opções de caixa de pesquisa para blogger. Todas elas apresentam um visual bem elegante e moderno, ajustando perfeitamente a qualquer layout, e deixando-o prático e completo.

Além disso mostraremos a facilidade de colocá-las no blog. Em pequenos passos já estará perfeitamente funcionando e complementando seu blog de maneira que seus visitantes possam encontrar o que procuram rapidamente. 

Para começarmos, escolha a de sua preferência e siga o tutorial de como instalá-las, a forma é igual para qualquer uma que você escolher. Veja os modelos, logo abaixo seus respectivos códigos e em seguida a forma de colocar em seu blog.

Observação: Se você tem experiência com Css pode alterar o código e personalizar mais a seu gosto e além disso colocar a caixa de pesquisa em qualquer parte de seu template.

Estilo 1


<style>
#divBusca{
background-color:#E0EEEE;
border:solid 2px #5F9EA0;
border-radius:10px;
width:290px;
height:32px;
}
#txtBusca{
float:left;
background-color:transparent;
padding-left:5px; font-size:18px;
border:none;
height:32px;
width:181px;
}
#btnBusca{
border:none;
float:left;
height:32px;
border-radius:0 7px 7px 0;
width:70px;
font-weight:bold;
background:#5F9EA0;
}
#divBusca img{
float:left;
}
</style>
<div id="divBusca">
<img src="http://2.bp.blogspot.com/-2UubX7RaQR4/Ut_lWlUN8cI/AAAAAAAACGo/ywRaOYaAKrg/s1600/search.png" alt="Buscar..."/>
<input type="text" id="txtBusca" placeholder="Buscar..."/>
<button id="btnBusca">Buscar</button>
</div>

Estilo 2


<style>
#txtBusca{
float:left;
background-color:transparent;
padding-left:5px; font-size:18px;
border:none;
height:34px;
width:190px;
}
#btnBusca{
float:left;
cursor:pointer;
width:60px;
height:37px;
}
#divBusca img{
float:left;
}
#divBusca{
border:solid 5px rgba(47, 79, 79, 0.8);
border-radius:5px;
height:37px;
width:290px;
}
</style> <div id="divBusca">
<img src="http://2.bp.blogspot.com/-2UubX7RaQR4/Ut_lWlUN8cI/AAAAAAAACGo/ywRaOYaAKrg/s1600/search.png" alt=""/>
<input type="text" id="txtBusca" placeholder="Buscar..."/>
<img src="http://4.bp.blogspot.com/-Rd1j4VV9rmk/Ut_mEJSTZvI/AAAAAAAACGw/6Te_5fsAmSQ/s1600/busca.png" alt="Buscar..." id="btnBusca"/>
</div>

Estilo 3


<style>#search {float:right; height: 30px; margin:10px 0 0 0; }
#search input.field {font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; background-position:top right; background-repeat:no-repeat; width: 180px; padding:7px; outline: none; font-size: 13px; border: none; z-index: 1; height:16px; float:left; padding-right:30px;}
#search input.field:focus {background-position:top right; background-repeat:no-repeat;}
#search input.submit {width:70px; height:30px; font-weight:bold; float:left; border:none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; cursor:pointer; margin:0 0 0 1px;}
#search input.field {background-image:url(https://lh4.googleusercontent.com/-kWepQUL6ypo/T_bcpvbb5nI/AAAAAAAACFo/OhezBRoj15E/s30/search_icon.png); background-color:#2c2c2c; color: #FFF;}
#search input.field:focus {background-image:url(https://lh4.googleusercontent.com/-kWepQUL6ypo/T_bcpvbb5nI/AAAAAAAACFo/OhezBRoj15E/s30/search_icon.png); background-color:#404040;}
#search input.submit {background-color:#b60002; color:#fff;}</style>
<div id='search'>
<form action='/search' id='searchform' method='get'>
<div><input class='field' id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Digite sua busca..&apos;;}' onfocus='if (this.value == &apos;Digite sua busca..&apos;) {this.value = &apos;&apos;;}' type='text' value='Digite sua busca..'/>
<input class='submit' name='submit' type='submit' value='Buscar'/></div>
</form>
</div>

Estilo 4


<style>
#searchb {
    float: left;
    margin: 30px 0
    }
#searchb input[type="text"], #searchb textarea {
    background: none repeat scroll 0 0 #F9F9F9;
    border: 0 none;
    float: left;
    height: 20px;
    padding: 5px 10px;
    width: 180px;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow: 0 2px 2px #000, 0 3px 10px rgba(0, 0, 0, 0.4) inset;
    -moz-box-shadow: 0 2px 2px #000, 0 3px 10px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 0 2px 2px #000, 0 3px 10px rgba(0, 0, 0, 0.4) inset;
    font-family: arial, helvetica, sans-serif;
    font-size: 15px
    }
#searchb .go:hover {
         background: #ccc; /*cor do hover botão*/
}
#searchb .go {
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow: 0 2px 2px #000, 0 -2px 10px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0 2px 2px #000, 0 -2px 10px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 2px 2px #000, 0 -2px 10px rgba(0, 0, 0, 0.5) inset;
    background: #8B0000; /*cor normal do botão*/
    color: #fff;
    border: 0 none;
    font-size: 15px;
    font-weight: bold;
    height: 30px;
    margin: 0 10px;
    padding-bottom: 3px;
    text-shadow: 0 1px rgba(255, 255, 255, 0.35);
    width: 70px;
    cursor: pointer
}
</style>
<form id="searchb" action="http://SEUBLOG.COM.BR/search-results/" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="ID-BLOG:yojsvasam2s" />
    <input type="hidden" name="cof" value="FORID:11" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" placeholder="Digite sua busca"/>
    <input type="submit" name="sa" value="Buscar" class='go'/>
  </div>
</form> 

* Na caixa Estilo 4, troque SEUBLOG.COM.BR, pelo endereço de seu blog.

Estilo 5


<style type="text/css">
#w2b-searchbox{background:url(http://lh6.googleusercontent.com/-wu3eH4N9D1Q/TeixH8dOd9I/AAAAAAAAA6Q/taoILP-y0vE/way2blogging_searchbox5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Passo a passo
1- Acesse seu Blogger e vá em "Layout".
2- Clique em "Adicionar um gadget" e escolha por "HTML/Javascript".
3- Dentro do conteúdo do gadget cole o código da caixa de pesquisa desejada.
4- Clique em "Salvar", arraste-o para o local desejado e clique em "Salvar Organização".
5- Vá em seu blog e veja o resultado.

Deixe seu comentário, ele é a motivação do nosso trabalho.
Proxima
« Anterior
Anterior
Proxima »