quarta-feira, 17 de setembro de 2008

Pesquisando no Google com o layout do seu site

Boa noite !! Acho que este é o primeiro post realmente, logo, vamos começar com algo interessante .. !!

Hoje em dia, pesquisa no seu site é algo fundamental, e para que reiventar a roda, já que a roda é tao bem feita ( A nossa roda amiga, Google !! ).

Resolvi postar algo que para os meus proximos projetos, certamente estará incluso, uma busca do google com a interface do seu próprio site.

Para fazer isto, o Google dispõe de uma ferramenta chamada Google AJAX Search API, você encontra toda a documentação da mesma no próprio site.

Existem várias maneiras para você inserir a busca dentro do seu site, veja alguns exemplos em:
http://code.google.com/apis/ajaxsearch/samples.html

Eu resolvi postar hoje um exemplo de pesquisa por abas, em cada aba vou inserir a pesquisa realizada sobre o tema que foi inserido no campo de texto. Como a imagem mostra abaixo:
image Repare, nela estou pesquisando o tema "Marcos Parente" em 4 abas, uma CF Brasil, outra na WEB outra, em Vídeo e outra em Blogs.

Neste exemplo tem uma folha de estilo simples veja :

<style type="text/css">
  body *, table *,
  body {
    font-family: "trebuchet ms", verdana, sans-serif;
    font-size: 12px;
  }
  #left-control .gsc-control, #right-control .gsc-control { width : 100%; }
  div.search-control { margin: 20px; }
  td.search-control { width : 450px; vertical-align : top; }
</style>


Bom... agora vamos começar...
Primeiro temos que inserir o script jsapi :

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

Segundo agora vamos inserir "o código" :

<script language="Javascript" type="text/javascript">
//<![CDATA[
  google.load('search', '1.0');
function OnLoad() {
var right = new google.search.SearchControl();
right.setResultSetSize(google.search.Search.LARGE_RESULTSET);
    searcher = new google.search.WebSearch();
    options = new google.search.SearcherOptions();
    searcher.setSiteRestriction("groups.google.com/group/cfbrasil");
    searcher.setUserDefinedLabel("CF Brasil");
right.addSearcher(searcher, options);
right.addSearcher(new google.search.WebSearch());
right.addSearcher(new google.search.VideoSearch());
right.addSearcher(new google.search.BlogSearch());
var drawOptions = new google.search.DrawOptions();
    drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
right.draw(document.getElementById("right-control"), drawOptions);
right.execute("Marcos Parente");
}
  google.setOnLoadCallback(OnLoad, true);
//]]>
</script>

Pronto, agora basta inserir no site !!
Veja o exemplo:

<table>
<tr>
<th>
          Pesquisa do google no seu site..
</th>
</tr>
<tr>
<td class="search-control">
<div class="search-control" id="right-control">Loading</div>
</td>
</tr>
</table>

 

Espero ter ajudado... (:

Inicio

Ola amigos....
Acho que finalmente resolvi iniciar um blog... e assim como este post serão os demais, objetivos !!!

Abraços !