Google web elements - färdig kod för kartor, sökruta, kalender mm

På Google web elements finns färdig kod att hämta för olika Google produkter såsom Google kalender, Google kartor, Google sökruta, YouTube etc. Enklare inställningar, t ex för storlek, görs direkt i ett formulär och sedan genereras koden som är färdig att använda direkt.

Google Sök på din hemsida

Med Googles AJAX Search API kan man lägga in en sökfunktion som söker igenom sidorna på sin webbplats. Jag har valt Custom Search Engines och modifierat lite så att resultatlistan är tom till att börja med.

I head-taggen:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script language="Javascript" type="text/javascript">//<![CDATA[
google.load('search', '1');
// Whenever a search starts, alert the query.
function searchStart(searchControl, searcher, query) {
var queryDiv = document.getElementById('query');
queryDiv.innerHTML = "<p>Du sökte efter: " + query + "</p><h2>Sökresultat</h2>";
}
function OnLoad() {
// create a search control
var searchControl = new google.search.SearchControl();
// Set the Search Control to get the most number of results
searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
// web search, open, alternate root
var options = new google.search.SearcherOptions();
options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
options.setRoot(document.getElementById("searchResults"));
// site restricted web search with custom label
// and class suffix
var siteSearch = new google.search.WebSearch();
//siteSearch.setUserDefinedLabel("Min hemsida");
//siteSearch.setUserDefinedClassSuffix("Sök");
siteSearch.setSiteRestriction("url");
searchControl.addSearcher(siteSearch, options);
// Set a callback so that whenever a search is started we will call searchStart
searchControl.setSearchStartingCallback(this, searchStart);
searchControl.draw(document.getElementById("searchForm"));
}
google.setOnLoadCallback(OnLoad);
//]]>
</script>

I body-taggen
<h1>Sök</h1>
<div id="google-search-form">
<div id="searchForm">Laddar...</div>
</div>
<div id="google-search-result">
<div id="query"></div>
<div id="searchResults">Laddar...</div>
</div>


Har ändrat lite på standardutseendet via CSS:
.gsc-twiddleRegionCell { /*döljer rubrik Webb*/
background-image : none;
display : none;
}

Googles AJAX Search API

Google web elements
Vill du göra det ännu enklare så hämta färdig kod direkt på Google web elements. Där kan du också enkelt koppla ditt Adsense-konto till sökmotorn.