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
ليست هناك تعليقات:
إرسال تعليق