Continúa nuestras novedades por e-mail

Home » » Search do Windows Live em seu site

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
إذا أعجبك الموضوع اضغط هنا , أو ضع إيميلك هنا ليصلك كل جديد

0 commentaires :