5202: Benutzerdefinierte Suche personalisieren

16.6.12

Benutzerdefinierte Suche personalisieren

Vor einiger Zeit habe ich mal was über die benutzerdefinierte Suche in Blogger geschrieben. Eine tolle Suchfunktion, gar keine Frage - um Welten besser als das 'offizielle' Blogger Suchgadget. Das einzige was mich an dem Teil ernsthaft gestört hat, das es hässlich ausschaut und brutal schwer zu personalisieren ist. Ein Bekannter wollte etwas 'cooleres' und vor allem simpleres und è voilá, hier ist es:

Demo

Ein Input-Feld, mit dem ihr meinen gesamten Blog mit Google durchsuchen könnt!

HTML

Die HTML für die Suchfunktion - die Idee dafür stammt vom genialen Blogger Greenlava:

<div class='cse' style='color:#000000;float:right;margin:6px 10px 0 0 ;'>
  <form action='http://www.google.com/cse' id='cse-search-box'>
  <input name='cx' type='hidden' value='006218488578192978542:e2edio1ssr8'/>
  <input type='text' name='q' size='40' placeholder="suchen ..."  />
  <input name='ie' type='hidden' value='ISO-8859-1'/>
  </form>
  <script type="text/javascript" src=""http://www.google.com/cse/brand?form=cse-search-box&amp;lang=de"></script>
</div>

In Zeile 3 müsst ihr eure Search-ID gegen meine ID 006218488578192978542:e2edio1ssr8 austauschen - ansonsten durchsucht ihr nicht euren, sondern meinen Blog :=).

Script

Der nächste Schritt ist eine Zeile jQuery, mit der die Google-Suche überhaupt erst personalisierbar wird:

<script type='text/javascript'>
$(document).ready(function() { 
$('input').css("background-image", "none"  + d.getTime());
 }); 
</script>

Das Script blendet das 'Standard' Hintergrundbild der Google Suche aus und verhindert, dass der Browser den Hintergrund aus dem Cache nachlädt. Ohne dieses Script gäbe es nur sehr wenig Layout Änderungen, die optisch 'gut' wirken.

CSS

Hier die CSS, die ich für die Demo oben verwendet habe:

<style>
#cse-search-box input {
    background: #444;
    border: 0 none;
    font-size: 1.6em;
    font-weight: bold;
    color: #777;
    width: 200px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
       -moz-border-radius: 20px;
            border-radius: 20px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
       -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
       -moz-transition: all 0.7s ease 0s;
         -o-transition: all 0.7s ease 0s;
            transition: all 0.7s ease 0s;
}
#cse-search-box input:focus {
    outline: none;
    width: 500px;
}
</style>

Hier sind Hintergrund, Schriftfarbe und .-Bild verändert und die Ecken leicht gerundet worden. Bei der 'Eingabe' eines Suchbegriffs kommt die Pseudklasse focus zum Einsatz - ich habe die 'Umrandung' entfernt (d.h. der blaue Rahmen) und statt dessen weitet sich die Suchbox nach rechts. Damit das 'smoothier' ausschaut, ist auf diese Bewegung eine Transition von 0.7s gelegt.

Zusammenfassung

Alles zusammen würde das in einem HTML/Java Gadget nun so aussehen:

<style>
#cse-search-box input {
    background: #444;
    border: 0 none;
    font-size: 1.6em;
    font-weight: bold;
    color: #777;
    width: 200px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
       -moz-border-radius: 20px;
            border-radius: 20px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
       -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
       -moz-transition: all 0.7s ease 0s;
         -o-transition: all 0.7s ease 0s;
            transition: all 0.7s ease 0s;
}
#cse-search-box input:focus {
    outline: none;
    width: 500px;
}
</style>
<script type='text/javascript'>
$(document).ready(function() { 
$('input').css("background-image", "none" +  d.getTime());
 }); 
</script>
<div class='cse' style='color:#000000;float:right;margin:6px 10px 0 0 ;'>
<form action='http://www.google.com/cse' id='cse-search-box'>
<input name='cx' type='hidden' value='006218488578192978542:e2edio1ssr8'/>
<input type='text' name='q' size='40' placeholder="suchen ..."  />
<input name='ie' type='hidden' value='ISO-8859-1'/>
</form>
<script type="text/javascript" src=""http://www.google.com/cse/brand?form=cse-search-box&amp;lang=de"></script>
</div>

Kommentare

Es war nicht ganz leicht, eine Möglichkeit zu finden, das Google Hintergrundbild zu überschreiben und damit das Suchfeld voll personlisierbar zu machen - falls euch weitere interessante Layouts dazu einfallen, hinterlasst doch einen Kommentar dazu!