Olá
Queridos Leitores, hoje iremos aprender como inserir uma caixa de
pesquisa/busca no Blog, ela tem o estilo Google e ainda tem o botão de
limpar o que foi digitado. O widget é muito bom, pensei em colocar até
reconhecimento de voz, mas acho que iria ficar um pouco estranho. O
Widget é prático, bonito, elegante e fácil de inserir. Não ter uma caixa
de busca no nosso blog é muito ruim para os leitores, eles querem achar
algo mas não há nada que faça-os poder achar, muitos deles não têm
paciência de ficar navegando entre os posts para achar algo, eles saem
do blog rapidamente e isso só fez aumentar a taxa de rejeição do seu
blog, e a solução pode ser essa. Vejam a
Demonstração: http://demo3.blogandocomfacilidade.com/
Vamos ao Tutorial:
1º – Acesse o painel do seu blog e clique na Guia Modelo.
2º – Em seguida, clique no Botão Editar HTML.
3º – Depois segure as teclas CTRL+F e procure por:
]]></b:skin>4º – E Acima dele cole o seguinte estilo:
#CaixaBuscar {margin:10px;}
#campo {float: left;width: 170px;padding-left: 8px;height:
29px;line-height: 18px;font-family: arial, sans-serif;font-size:
14px;color: #333;background: white;border: solid 1px #D9D9D9;border-top:
solid 1px silver;border-right: none;outline: none;}
#campo-apagar
{float:left;width:16px;height:29px;line-height:27px;margin-right:15px;padding:0
10px 0 10px;font-family: "Lucida Sans", "Lucida Sans
Unicode",sans-serif;font-size:22px;background: #fff;border:solid 1px
#d9d9d9;border-top:solid 1px #c0c0c0;border-left:none;}
#campo-apagar #x {color:#A1B9ED;cursor:pointer;display:none;}
#campo-apagar #x:hover {color:#36c;}
#buscar:active {-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);}
#buscar {cursor:pointer;width:70px;height:
31px;line-height:0;font-size:0;text-indent:-999px;color:
transparent;background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4A8V5s59yNvMKfaYkM1me5XwJEUlyLhiNqVp61G0J-feK35pnk6-FY7aTSHYMTxoIG0jWYBzYwSUFKmLCkjJIcMW7si7vpN6dIYi9ZqXdhvU9CvKY9NMhN4NAfNItiJz41oYzHKPKnnyw/s1600/ico-search.png)
no-repeat #4d90fe center;border: 1px solid #3079ED;-moz-border-radius:
2px;-webkit-border-radius: 2px;}
#buscar:hover {background-color: #4088FD;border: 1px solid #2F5BB7;}
.fclear {clear:both}5º – Depois segure novamente as teclas CTRL+F e procure por:
</head>6º – E Acima dele cole o seguinte código:
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
// if text input campo value is not empty show the "X" button
$("#campo").keyup(function() {
$("#x").fadeIn();
if ($.trim($("#campo").val()) == "") {
$("#x").fadeOut();
}
});
// on click of "X", campo-apagar input campo value and hide "X"
$("#x").click(function() {
$("#campo").val("");
$(this).hide();
});
});
</script>7º – Em seguida, clique em Salvar Modelo.
8º – Agora clique na Guia Layout.
9º – Na lateral do blog clique em Adicionar gadget.
10º – Depois selecione o Gadget tipo HTML/Javascript.
11º – Dentro do conteúdo do gadget cole o seguinte código:
<div id="CaixaBuscar">
<form name="SUYB" action="/search" method="get">
<input type="text" id="campo" id="s" name="q"/>
<div id="campo-apagar"><span id="x">x</span></div>
<input id="buscar" type="submit" name="submit" value="Search" /></form>
</div>12º – Depois clique em Salvar.
Postagens
