terça-feira, 24 de junho de 2014

Caixa de Pesquisa para Blogger

É muito importante ter uma caixa de pesquisa no seu blogger. Através dela seu leitor poderá localizar facilmente o que procura, tornando sua navegação mais proveitosa. Com isso o leitor se sente mais confortável e consequentemente ficará mais tempo em seu blog.

Neste artigo vou colocar 6 tipos de caixa de pesquisa para que você possa instalar no Blogger. Não se preocupe que não são difíceis de instalar.

1ª Caixa de Pesquisa:

<form action="http://www.google.com/search" method="get" target="_blank"><input name="q" value="" size="34" type="text" /><input name="domains" value="videotutorialbloggerteste1.blogspot.com" type="hidden" /><input name="sitesearch" value="videotutorialbloggerteste1.blogspot.com" type="hidden" /><input value="Pesquisar" type="submit" /></form>

Para adicionar essa caixa de pesquisa, clique em "Layout">"Adicionar um Gadget">"HTML/Javascrip" - cole o código acima e arraste para o local desejado em seu Blogger.

2ª Caixa de Pesquisa:

<style type="text/css"></style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input id="s" name="q" value="" type="text" />
<input value="Pesquisar" name="btnG" type="submit"/></form></div>

Para adicionar essa caixa de pesquisa, clique em "Layout">"Adicionar um Gadget">"HTML/Javascrip" - cole o código acima e arraste para o local desejado em seu Blogger.

3ª Caixa de Pesquisa:

<style>
#searchb {
float: left;
margin: 30px 0
}
#searchb input[type="text"], #searchb textarea {
background: none repeat scroll 0 0 #F9F9F9; /*cor de fundo onde digitamos a pesquisa*/
 border: 0 none;
 float: left;
 height: 20px;
    padding: 5px 10px;
    width: 120px;
    -webkit-border-radius: 5px 5px 5px 5px; /*grau de arredondamento da área onde digitamos*/
    -moz-border-radius: 5px 5px 5px 5px; /*grau de arredondamento da área onde digitamos*/
    border-radius: 5px 5px 5px 5px;/*grau de arredondamento da área onde digitamos*/
    -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; /*tipo de fonte*/
    font-size: 15px; /*tamanho da fonte */
    }
#searchb .go {
    -webkit-border-radius: 5px 5px 5px 5px;  /*grau de arredondamento do botão Buscar*/
    -moz-border-radius: 5px 5px 5px 5px; /*grau de arredondamento do botão Buscar*/
    border-radius: 5px 5px 5px 5px; /*grau de arredondamento do botão Buscar*/
    -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: #D8D8D8; /*cor normal do botão*/
    border: 0 none;
    font-size: 15px; /*tamanho da fonte do botão Buscar*/
   font-family: arial, helvetica, sans-serif; /*tipo de fonte do botão Buscar*/
    height: 30px;
    margin: 0 10px;
    padding-bottom: 3px;
    text-shadow: 0 1px rgba(255, 255, 255, 0.35);
    width: auto;
    cursor: pointer
 }

#searchb .go:hover {
         background: #A4A4A4; /*cor do botão Buscar em estado hover*/
}
</style>

<form id="searchb" action="URL COMPLETA DO SEU BLOG" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="ID DO SEU BLOG" />
    <input type="hidden" name="cof" value="FORID:11" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" placeholder="Pesquise no site"/>
    <input type="submit" name="sa" value="Buscar" class='go'/>
  </div>
</form>

Para adicionar essa caixa de pesquisa, clique em "Layout">"Adicionar um Gadget">"HTML/Javascrip" - cole o código acima e arraste para o local desejado em seu Blogger.

NOTE: Onde está escrito em vermelho, você terá que substituir pela URL completa do seu Blogger e o ID do seu Blog. Para achar o id do seu blog, basta clicar em "Layout" e verificar na caixa de endereço do seu navegador, como mostra a imagem abaixo:

4ª Caixa de Pesquisa:

<style>
#search {
float:right;
height: 30px;
margin:10px 0 0 0;
}
#search input.field {
font-family: "Arial","Lucida Sans Unicode",Arial,Verdana,sans-serif;
background-position:top right;
background-repeat:no-repeat;
width: 130px;
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:auto;
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:#D8D8D8; /*cor de fundo de onde digitamos a busca*/
color: #000;/*cor de fonte*/
}
#search input.field:focus {
background-image:url(https://lh4.googleusercontent.com/-kWepQUL6ypo/T_bcpvbb5nI/AAAAAAAACFo/OhezBRoj15E/s30/search_icon.png);
background-color:#000000;/*cor de fundo do botão Buscar em estado hover*/
}
#search input.submit {
background-color:#000000; /*cor de fundo do botão Buscar*/
color:#fff;/*cor da fonte do botão Buscar*/
}
</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>

Para adicionar essa caixa de pesquisa, clique em "Layout">"Adicionar um Gadget">"HTML/Javascrip" - cole o código acima e arraste para o local desejado em seu Blogger.

5ª Caixa de Pesquisa:

<style type="text/css">
#w2b-searchbox{background:url(http://lh5.googleusercontent.com/-Cm6Ya53Wj6g/TeixHY3LRDI/AAAAAAAAA6I/jJkMnJEN60s/way2blogging_searchbox1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;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="Buscar..." onfocus='if (this.value == "Buscar...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Buscar...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Para adicionar essa caixa de pesquisa, clique em "Layout">"Adicionar um Gadget">"HTML/Javascrip" - cole o código acima e arraste para o local desejado em seu Blogger.

6ª Caixa de Pesquisa:

<style type="text/css">
#w2b-searchbox{background:url(http://lh4.googleusercontent.com/-Pd1zyUMhsVo/TeixHnaB1hI/AAAAAAAAA6M/p-Iz_WGMQ3M/way2blogging_searchbox4.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>

Para adicionar essa caixa de pesquisa, clique em "Layout">"Adicionar um Gadget">"HTML/Javascrip" - cole o código acima e arraste para o local desejado em seu Blogger.

Saiba como colocar o cabeçalho do Blogger com fundo transparente clicando aqui!

Nenhum comentário:

Postar um comentário