Olá pessoal, meu nome é Mauricio Junior. Escrevo este artigo para mostrar a todos como colocar um sistema de busca eficiente em seu site, com paginação e interface bonita mesmo que não tenha banco de dados, arquivos indexáveis e um sistema de busca no site. Você deve estar pensando: - mas como colocar um sistema de busca em meu site?
Estive navegando na internet e acabei vendo esse tipo de opção junto ao outro site cujo gostei de como foi feito. Portanto, comecei a pesquisar sobre o assunto e sobre a ferramenta, pois com algumas linhas de código o mesmo é colocado em seu site e busca todos os dados que existem nele automaticamente. Existe a paginação que existe na busca e o mais importante, sem sair da sua primeira página em layout.
Resumindo, precisa-se apenas de alguns campos html e duas funções em javascript para o devido funcionamento. Esta busca pode ser colocado em qualquer site, mesmo se o mesmo for apenas html. Basta atribuir o site e tamanho da tela que irá aparecer depois que o usuário fizer alguma busca.
No decorrer do artigo, mostrarei o código normalmente. Utilizarei o CallBack via javascript cujo o sistema disponibiliza para todos.
Primeiro Botão
Onde digita os dados.
|
<input id="WLSearchBoxInput" size="11" style="background-position: right 50px; background-image: url('http://search.live.com/s/siteowner/searchbox_background.png'); width: 161px; background-repeat: no-repeat; height: 16px; border: #ffffff 0px" type="text" value="loading..." /> |
Segundo Botão
Onde clica para buscar os dados e aparecer a tela de resultados.
|
<input id="WLSearchBoxButton" src="http://search.live.com/s/siteowner/searchbutton_normal.PNG" style="border-style: none" type="image" /> |
No primeiro botão, coloco como background uma imagem usada junto ao site da Microsoft.
Primeiro JavaScript
|
<script charset="utf-8" type="text/javascript"> var WLSearchBoxConfiguration= { "global":{ "serverDNS":"search.live.com" }, "appearance":{ "autoHideTopControl":false, "width":600, "height":400 }, "scopes":[ { "type":"web", "caption":"|MAURICIOJUNIOR.ORG|", "searchParam":"site:http:\/\/www.mauriciojunior.org" } , { "type":"web", "caption":"Web", "searchParam":"" } ] } </script> |
Explicação: O mais importante aqui é você colocar um label para o titulo cujo está com o nome caption junto ao javascript. Depois o próximo parâmetro que precisa ser atribuído é o searchParam cujo você coloca o site onde deverá ser buscado os dados.
Segundo JavaScript
|
<script language="javascript" src="http://search.live.com/bootstrap.js?ServId=SearchBox&ServId=SearchBoxWeb& Callback=WLSearchBoxScriptReady"></script> |
Explicação: Esse segundo javascript é apenas para aparecer a tela e utilizar o callback.
Resultado final.
Espero ter ajudado a todos. Segue todo o código fonte utilizando tabelas e imagens específicas abaixo.
|
<table width="750" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td align="right"> <table> <tr> <td> <img src="http://search.live.com/s/siteowner/poweredbywl.gif" /> </td> <td> <div id="WLSearchBoxDiv" style="width: 162px"> <table cellpadding="0" cellspacing="0"> <tr id="WLSearchBoxPlaceholder"> <td style="border-right: #4b7b9f 2px; border-top: #4b7b9f 2px solid; border-left: #4b7b9f 2px solid; border-bottom: #4b7b9f 2px solid"> <input id="WLSearchBoxInput" size="11" style="background-position: right 50px; background-image: url('http://search.live.com/s/siteowner/searchbox_background.png'); width: 161px; background-repeat: no-repeat; height: 16px; border: #ffffff 0px" type="text" value="loading..." /> </td> <td style="border: #4b7b9f 2px solid"> <input id="WLSearchBoxButton" src="http://search.live.com/s/siteowner/searchbutton_normal.PNG" style="border-style: none" type="image" /> </td> </tr> </table> <script charset="utf-8" type="text/javascript"> var WLSearchBoxConfiguration= { "global":{ "serverDNS":"search.live.com" }, "appearance":{ "autoHideTopControl":false, "width":600, "height":400 }, "scopes":[ { "type":"web", "caption":"|MAURICIOJUNIOR.ORG|", "searchParam":"site:http:\/\/www.mauriciojunior.org" } , { "type":"web", "caption":"Web", "searchParam":"" } ] } </script> <script language="javascript" src="http://search.live.com/bootstrap.js?ServId=SearchBox&ServId=SearchBoxWeb& Callback=WLSearchBoxScriptReady"></script> </div> </td> </tr> </table> </td> </tr> </table> |
Espero que ajude a todos.
Mauricio Junior
