[BLOGGER] Google Custom Search without script-tag ✤✤✤

Hallöchen ^^
Als ich am Update des Menüs gearbeitet hab, hab ich festgestellt, dass ich mal wieder ein Suchfeld benötige,und weil ich fand, dass es passen würde, noch ein Suchfeld mit Taste zu haben, anstelle eines einfachen Suchfelds, wie ich es hier vorgestellt habe. Also habe ich etwas recherchiert und dann gleich auch noch eine Version ohne JavaScript, was ich natürlich gut fand, weil im Menü schon einiges davon verwendet wird und ich das gern in Grenzen halte. Der Code ist ganz einfach und schaut wie folgt aus:

<form action='http://www.google.co.uk/cse' id='cse-search-box'>
<input name='cx' type='hidden' value='GOOGLESUCHMASCHINENID'/>
<input name='cof' type='hidden' value='UTF-8'/>
<input id='feld' name='q' type='text'/>
<input id='button' name='sa' type='submit' value='Search'/></form>

Bei Value müsst ihr eure eigene ID eingeben. Zur Einrichtung habe ich euch in besagtem Tutorial ein Tutorial verlinkt, dort findet ihr eure ID.

Sobald ihr das habt, funktioniert das Feld. Mit der Suchleiste weiter oben im Post könnt ihr das auch mal durchsuchen.

Nun, wenn ihr allerdings euer Feld einfügt, schaut das nicht so aus, wie meins oben sondern so:

Um das noch etwas aufzupeppen benutzt ihr einfach CSS, wobei ihr "#feld" für die Suchleiste und "#button" für den Knopf verwendet.
Beispiele habe ich euch im anderen gezeigt, jetzt könnt ihr einfach noch den Knopf mitgestalten. :D

Ein einfaches Beispiel sähe dann zum Beispiel so aus:

#feld{
 border: none;
 background: rgba(214,171,141,.9);
 padding: 10px;
 width: 200px;
 border-left: dotted 2px rgba(0,0,0,.2);
}

#button{
 border: none;
 padding: 10px;
 border-left: solid 5px rgba(214,171,141,.5);
 border-right: dotted 2px rgba(0,0,0, .2);
 background: rgba(0,0,0,.05);
 margin-left: -7px;
}

#feld:focus{
 background: rgba(214,171,141,.6);
 padding: 10px;
 width: 200px;
 border-left: dotted 3px rgba(0,0,0,.4);
}

#button:focus{
 background: rgba(214,171,141,.1); 
}

Joa, nur sehr kurz aber ich dacht ich teil es trotzdem mit euch. :)
Schöne Pfingsten noch! (yeah, freier Montag, das ist doch toll ^^)