Google Custom Search Engine – eigenes Design verwenden

Googles Suche für die eigene Webseite optisch anpassen

Google bietet mit seiner CSE (Google Custom Search Engine) eine Suchmaschine für die eigene Homepage, welche sehr oft besser funktioniert als die eigene Suche in Scripten und bietet noch den Vorteil einer übergreifenden Suche. D.h. kommen z.B. unterschiedliche Skripte auf einer Webseite zum Einsatz kann die Google Suche gleichzeitig aus allen Ebenen Ergebnisse liefern. Dahingegen sind die eingebauten Suchen nur auf die eigene Suchumgebung begrenzt. Hinzu kommt noch die Möglichkeit alle Suchen über Google Tools zu analysieren und darauf zu reagieren. Alles ohne viel Aktion und sehr zuverlässig!

Allerdings hat diese Suche einen gewaltigen Nachteil – die Optik der Suche ist nicht wirklich schön und man hat auch nicht wirklich die Möglichkeit über die Konfiguration auf der Google Seite, diese Suchmaschine optisch für seine Umgebung anzupassen. Was man von Google bekommt – sieht dann ungefähr wie folgt aus – aber das kennt ihr ja, sonst hättet ihr den Beitrag wohl nicht gesucht und gefunden:

Nicht sehr hübsch! Jetzt könnte man natürlich  versuchen, die Suche mit Photoshop so zu verstecken, damit dieser relativ einfache Style nicht mehr auffällt oder man löst die Sache einen Tick eleganter und versucht sich an einer Lösung mittels CSS Technik! Dies hat den Vorteil – man ist erstens sehr flexibel und der Aufruf der Suche ist sehr schlank und wird schnell geladen!

Doch wie verschönert man die CSE mit CSS?!

Ihr solltet bis jetzt solch einen Code im Einsatz haben:

<form action=“http://www.itler.org/search/“ id=“cse-search-box“>
<div>
<input type=“hidden“ name=“cx“ value=“partner-pub-xxxxxxxxxxxxxxxxxxxxxxxxxxxx“ />
<input type=“hidden“ name=“cof“ value=“FORID:10″ />
<input type=“hidden“ name=“ie“ value=“UTF-8″ />
<input type=“text“ name=“q“ size=“35″ />
<input type=“submit“ name=“sa“ value=“Search“ />
</div>
</form>
<script type=“text/javascript“ src=“http://www.google.com/jsapi“></script>
<script type=“text/javascript“>google.load(„elements“, „1“, {packages: „transliteration“});</script>
<script type=“text/javascript“ src=“http://www.google.com/cse/t13n?form=cse-search-box&t13n_langs=en“></script>

<script type=“text/javascript“ src=“http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en“></script>

 

Die Anzeige und die Inhalte im Suchfenster wird direkt von Google über das eingebettete Javascript gelöst! D.h. möchte man sein eigenes Suchfenster generieren, muss die <script> Funktion gelöscht werden, da man ansonsten nicht auf einen grünen Zweig kommt. Des weiteren muss der Code dann mit eigenen IDs ausgestattet werden welche man über die CSS3 Datei ansprechen kann.

Daraus wird dann z.B. ein Aufruf welcher wie folgt aussehen könnte:

 

<form class=“searchform“ id=“searchbox_partner-pub-xxxxx:cabcix-ftcn“ action=“https://itler.net/suche“>
<input value=“partner-pub-xxxxx:cabcix-ftcn“ name=“cx“ type=“hidden“/>
<input value=“FORID:11″ name=“cof“ type=“hidden“/>
<input  id=“q“ style=“width:250px;“ name=“q“ size=“70″ type=“text“ class=“searchfield“ value=“suchen…“ onfocus=“if (this.value == 'suchen…‘) {this.value = “;}“ onblur=“if (this.value == “) {this.value = 'suchen…‘;}“ />
<input name=“sa“ class=“searchbutton“ value=“⇒“ type=“submit“  />
</form>

Wie man sieht ist nun einiges abgespeckt worden!

Nun fehlt nur noch die passende CSS Datei um die Google Custum Search anzupassen und eine bestimmte Form darzustellen!
Hier mal ein kleines Beispiel:

 

<style type=“text/css“>

/* search form
————————————– */
.searchform {
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #d2d2d2;
padding: 3px 5px;

-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;

-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);

background: #f1f1f1;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top,  #fff,  #ededed);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff‘, endColorstr='#ededed‘); /* ie7 */
-ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff‘, endColorstr='#ededed‘); /* ie8 */
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;

-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;

-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);

-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;

background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top,  #9e9e9e,  #454545);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e‘, endColorstr='#454545′); /* ie7 */
-ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e‘, endColorstr='#454545′); /* ie8 */
}
</style>

Dieses könnt ihr nun entweder wie im Beispiel direkt über den <style> in den Quellcode einfügen oder ihr packt den Code in Eure CSS Datei, welche zur Seite gehört!

Habt ihr alles richtig gemacht, müsste die Google Custom Search Engine nun wir folgt aussehen:

 

 

Schon viel besser wie ich finde!

 

Wer noch mehr CSS 3 Vorlagen für die eigene Google Suche benötigt, kann sich hier einmal genauer umsehen!

Viel Spaß beim Designen!