quarta-feira, 20 de novembro de 2013

6 ELEGANTES CAIXAS DE BUSCA PARA BLOG - Ferramenta de pesquisa para personalizar o seu blog



Publicado por Claudio Luiz Oliveira às 24.9.12 - Marcadores: , , 
Aprenda a colocar uma elegante caixa de busca em seu blog.
caixas de busca para blog
Olá Pessoal, hoje vou ensinar a vocês como colocar uma caixa de busca  em seu blog. Essa caixa é muito importante pois ela facilita a navegação dos seus leitores em seu blog, é muito inconveniente quando entramos em um blog que não contêm caixa de busca, eu mesmo já entrei em blogs assim e quando quis pesquisar sobre algo não encontrei a caixa de busca isso fez com que eu saísse do blog sem achar o que estava procurando. Por isso hoje vou compartilhar com vocês esse seis lindos modelos de caixa de busca, vamos lá.
Os códigos  são bem simples e podem ser adicionados onde desejar, mas recomendo nos gadgets, para isso acesse o Painel do Blogger, vá Layout e clique em adicionar Gadget e escolha Html/JavaScript cole o código referente ao modelo desejado e salve. 
elegantes caixa de busca para blog

ESTILO 1

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNkSz-97EPwEP04w4kVH7CYF-QEpCOFweGFdNnKiCtYwXF_GqtZlwN90vfTaio0szdfFrSpxe5ooZTDqqmH5XpBaZPprNhjWwt2GFRzNrhA4MAQmCnxbNcBwkxPM0i36do7j09ow5JN-1F/) 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>

ESTILO 2

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinfGiqx1U3J70CqhtVj2NxeBF72EFVoHeNIwkoup8e5FACWluTw1H0RyzDYXO6uFJRfddyYfrNfw_DtPTjgJZ2rldoS0e31SblSMGujiCN40yP5XJavTsi_KSfXZFDiUMkFwTcz2ggo5Uj/) 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>

ESTILO 3

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBxpZuEhpKZ45aoSA4-D6f16f4qv7yvVnUvWhJWXhPGS2pSpjV4lHThZXSZmCPVj7777ucYoWhuBUR5XsS6yER_NFr5PQtRFu6Vm1B7DeoK6NqAqrmIXZT0jMApzcfYkEO1YJgO8MtXeZq/) 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>

ESTILO 4

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsI7Fy-uHkwcJgQIHD7_pX_En_y15cS5qTY4hYkjnC8-AzRpqJ8-2UPNVeLAPq3Zn8tcQwf-qlwiXNPK7FGp94i0N2L7ZkaFbn_zmJZ7NHUpmMqOeVxep9Cu1qQoe81yvEoDe653K9AA4V/) 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>

ESTILO 5

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1oRet2i55CI1W2sAibur0O-FKXAzzXpg96WZjBCDNO0tLWbfSevWmD94krOR_ZcpPnSYHTQdEeYRwwNm2XFwJuseg8q8LrqETuA_ojfHB6DvpZ4rAuGp1mtGQ3OZ4V1NvA9mkuv7BupKe/) 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>

ESTILO 6

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6cvBZpYjzvtj7ZO1Hj7qVblZTHpQD3Osu2XHPArZlJzU-CGTPytIZrS4NBtirUxtQeK-w9UEhOwK1qq-sXhTfdTUN6LLsHyBOylmF51ORE53UsvJdew4IAH-Adh1fQiHeT7KTYwjDAagg/) 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>Fonte: http://www.personalizaroblogger.com.br/2012/09/6-elegantes-caixas-de-busca-para-blog.html
Postado por às

Um comentário:

Assinar: Postar comentários (Atom)

Translate