É 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.
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhglzAXqJBKx0hL9TK84HJFGlbUgAEYQGO1Cv5RAliohlcSuH-ed_4rLkwR2bBD6K0orhY3N2YN3TsSLeXwtxJFm_8v3hTSraZf-H4IdHh8jIcePzyaNFT1AEQTF2CbN1zu4afLg_a4MYt8/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhglzAXqJBKx0hL9TK84HJFGlbUgAEYQGO1Cv5RAliohlcSuH-ed_4rLkwR2bBD6K0orhY3N2YN3TsSLeXwtxJFm_8v3hTSraZf-H4IdHh8jIcePzyaNFT1AEQTF2CbN1zu4afLg_a4MYt8/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 == '')
{this.value = 'Digite sua busca..';}' onfocus='if (this.value
== 'Digite sua busca..') {this.value =
'';}' 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9bR61aAhMAAzz6cSbZKhm-HRZLOUoWyYNoOor9nhdcaDTUXxjwFkCBo_Mg2Yfuofi4rB0fNsnV5eIVhZ6M8PB7jAMlPC0TsiG3iSyEKNLTkC7mgWp83pyQRLb6mE4Psk-0QvqQFCspWJ0/)
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHhI3lx1pqlGICsF4_Jj_FlGXDjFTcA93nIIyRd5sHWC9leY8XFoV0XP653q7kHXWIFL3ldoTvLhx8nipbTM3KslIlSc4RqNMr4KtLNxJThlQAFPoOHrrcZqi8_Raevc97SEhkQ0Exetsj/)
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!
Saiba como colocar o cabeçalho do Blogger com fundo transparente clicando aqui!
Nenhum comentário:
Postar um comentário