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:
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 !