Search do Windows Live em seu site

Ol� pessoal, 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 e 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
colocada 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 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� 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 que est� com o nome caption junto ao javascript. Depois o pr�ximo par�metro que precisa ser atribu�do � o searchParam que 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.

fonte:http://www.linhadecodigo.com.br/Artigo.aspx?id=1678