tag:blogger.com,1999:blog-77836748952223549342011-11-27T21:36:08.996-02:00CFing...Marcos Parentehttp://www.blogger.com/profile/06193063926524363673noreply@blogger.comBlogger21100tag:blogger.com,1999:blog-7783674895222354934.post-84581619709957728882008-09-17T21:44:00.001-03:002008-09-18T10:32:53.005-03:00Pesquisando no Google com o layout do seu site<p>Boa noite !! Acho que este é o primeiro post realmente, logo, vamos começar com algo interessante .. !!</p> <p>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 !! ).</p> <p>Resolvi postar algo que para os meus proximos projetos, certamente estará incluso, uma busca do google com a interface do seu próprio site.</p> <p>Para fazer isto, o Google dispõe de uma ferramenta chamada <a href="http://code.google.com/apis/ajaxsearch/documentation/">Google AJAX Search API</a>, você encontra toda a documentação da mesma no próprio site.</p> <p>Existem várias maneiras para você inserir a busca dentro do seu site, veja alguns exemplos em: <br /><a title="http://code.google.com/apis/ajaxsearch/samples.html" href="http://code.google.com/apis/ajaxsearch/samples.html">http://code.google.com/apis/ajaxsearch/samples.html</a></p> <p>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: <br /><a href="http://lh4.ggpht.com/marcosparente/SNGkUkRY0EI/AAAAAAAAABU/iCMrsS2KLvY/image%5B8%5D.png"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="86" alt="image" src="http://lh6.ggpht.com/marcosparente/SNGkU0oBOZI/AAAAAAAAABY/cUaTly88eQ8/image_thumb%5B6%5D.png" width="423" border="0" /></a> 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.</p> <p>Neste exemplo tem uma folha de estilo simples veja : </p> <table style="font-size: 9px; border-top-style: dashed; border-right-style: dashed; border-left-style: dashed; border-bottom-style: dashed" cellspacing="0" cellpadding="2" width="417" border="1"><tbody> <tr> <td valign="top" width="415"> <p><<a href="http://december.com/html/4/element/style.html">style</a> type="text/css"> <br />  body *, table *, <br />  body { <br />    font-family: "trebuchet ms", verdana, sans-serif; <br />    font-size: 12px; <br />  } <br />  #left-control .gsc-control, #right-control .gsc-control { width : 100%; } <br />  div.search-control { margin: 20px; } <br />  td.search-control { width : 450px; vertical-align : top; } <br /></<a href="http://december.com/html/4/element/style.html">style</a>></p> </td> </tr> </tbody></table> <p> <br />Bom... agora vamos começar... <br /><strong>Primeiro</strong> temos que inserir o script jsapi : <br /></p> <table style="font-size: 9px; border-top-style: dashed; border-right-style: dashed; border-left-style: dashed; border-bottom-style: dashed" cellspacing="0" cellpadding="2" width="400" border="1"><tbody> <tr> <td valign="top" width="400"> <p><<a href="http://december.com/html/4/element/script.html">script</a> src="http://www.google.com/jsapi" type="text/javascript"></<a href="http://december.com/html/4/element/script.html">script</a>></p> </td> </tr> </tbody></table> <p><strong>Segundo</strong> agora vamos inserir "o código" :</p> <table style="font-size: 9px; border-top-style: dashed; border-right-style: dashed; border-left-style: dashed; border-bottom-style: dashed" cellspacing="0" cellpadding="2" width="400" border="1"><tbody> <tr> <td valign="top" width="400"> <p><<a href="http://december.com/html/4/element/script.html">script</a> language="Javascript" type="text/javascript"> <br />//<![CDATA[ <br />  google.load('search', '1.0'); <br />function OnLoad() { <br />var right = new google.search.SearchControl(); <br />right.setResultSetSize(google.search.Search.LARGE_RESULTSET); <br />    searcher = new google.search.WebSearch(); <br />    options = new google.search.SearcherOptions(); <br />    searcher.setSiteRestriction("groups.google.com/group/cfbrasil"); <br />    searcher.setUserDefinedLabel("CF Brasil"); <br />right.addSearcher(searcher, options); <br />right.addSearcher(new google.search.WebSearch()); <br />right.addSearcher(new google.search.VideoSearch()); <br />right.addSearcher(new google.search.BlogSearch()); <br />var drawOptions = new google.search.DrawOptions(); <br />    drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED); <br />right.draw(document.getElementById("right-control"), drawOptions); <br />right.execute("Marcos Parente"); <br />} <br />  google.setOnLoadCallback(OnLoad, true); <br />//]]> <br /></<a href="http://december.com/html/4/element/script.html">script</a>></p> </td> </tr> </tbody></table> <p>Pronto, agora basta inserir no site !! <br />Veja o exemplo: <br /></p> <table style="font-size: 9px; border-top-style: dashed; border-right-style: dashed; border-left-style: dashed; border-bottom-style: dashed" cellspacing="0" cellpadding="2" width="400" border="1"><tbody> <tr> <td valign="top" width="400"> <p><<a href="http://december.com/html/4/element/table.html">table</a>> <br /><<a href="http://december.com/html/4/element/tr.html">tr</a>> <br /><<a href="http://december.com/html/4/element/th.html">th</a>> <br />          Pesquisa do google no seu site.. <br /></<a href="http://december.com/html/4/element/th.html">th</a>> <br /></<a href="http://december.com/html/4/element/tr.html">tr</a>> <br /><<a href="http://december.com/html/4/element/tr.html">tr</a>> <br /><<a href="http://december.com/html/4/element/td.html">td</a> class="search-control"> <br /><<a href="http://december.com/html/4/element/div.html">div</a> class="search-control" id="right-control">Loading</<a href="http://december.com/html/4/element/div.html">div</a>> <br /></<a href="http://december.com/html/4/element/td.html">td</a>> <br /></<a href="http://december.com/html/4/element/tr.html">tr</a>> <br /></<a href="http://december.com/html/4/element/table.html">table</a>></p> </td> </tr> </tbody></table> <p> </p> <p>Espero ter ajudado... (: </p> <div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7783674895222354934-8458161970995772888?l=marcos-parente.blogspot.com' alt='' /></div>Marcos Parentehttp://www.blogger.com/profile/06193063926524363673noreply@blogger.com2tag:blogger.com,1999:blog-7783674895222354934.post-86812876683485740482008-09-17T21:21:00.001-03:002008-09-17T21:21:37.309-03:00Inicio<p>Ola amigos.... <br />Acho que finalmente resolvi iniciar um blog... e assim como este post serão os demais, objetivos !!!</p> <p>Abraços !</p> <div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7783674895222354934-8681287668348574048?l=marcos-parente.blogspot.com' alt='' /></div>Marcos Parentehttp://www.blogger.com/profile/06193063926524363673noreply@blogger.com1