Be KreaTief

[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 ^^)


edit

8 comments:

  1. Hi. Habe die CSS ein bisschen umgeformt und möchte nun dieses Gadgets zentrieren. Ich habs einfach mal mit <'center> ... versucht(ohne '), klappt aber nicht. Was kann man noch "ausprobieren"? ..Vielleicht mit position: absolute?

    ReplyDelete
  2. achja, mein Blog: http://iamtimblog.blogspot.com

    ReplyDelete
    Replies
    1. Also zentrieren geht mit align:center oder float:center (ersteres allerdings lieber) wenn's nicht klappen sollte, dann füg noch ein !important vor das Semikolon. :)

      Delete
    2. Klappt immer noch nicht. Das habe Ich in meine HTML über ]]> eingefügt:
      #cse-search-box {
      align:center !important;
      }

      Delete
    3. Hm... Versuch sonst mal das Ganze in einen div-Container zu packen und dann mal:

      margin-left: auto;
      margin-right: auto;

      align: center;

      float: center;

      Das sind alle Möglichkeiten die mir einfallen um etwas zu zentrieren, probier mal alle durch. Und sonst noch ein position: absolute hinzufügen. Irgendwie muss das doch machbar sein. Manchmal nervt Blogger echt.

      Delete
    4. No, klappt nicht. Blogger spinnt bei mir eh total: Wenn Ich im Vorlagendesigner irgendetwas anpassen möchte, funktioniert das nicht. da steht zwar, dass das angepasst wurde, aber man sieht nichs und in meiner HTML steht auch nichts drin. Naja, egal. Danke,dass du die so viel Zeit genommen hast.

      Delete
  3. Schönes Tut, aber ich würde jetzt gern noch einfügen, dass da "Suche" im Kästchen drin steht. Hab das auch soweit hinbekommen, allerdings jetzt ist der Schriftzug immer in rosa statt in weiß. o.O
    Mein Code schaut so aus: http://codepen.io/seraphzz/pen/eosLx bzw. auf http://hekabeswelt.blogspot.de/ siehst du's sowieso nochmal. Hast du vielleicht ne Idee, wo der Fehler liegt?
    lg und viel Glück bei deinen Prüfungen :)
    Hekabe

    ReplyDelete
  4. Ahhh, ich hätte dann noch eine Frage (wenn ich nerve, sags einfach! :D):

    Und zwar wollte ich mir jetzt auch so ein Suchfeld machen, allerdings kommt immer, wenn ich damit was suchen will, eine Fehlermeldung :( Weißt du vielleicht, was mein Fehler sein könnte?

    ReplyDelete

Fragen, Feedback oder anderes, was du loswerden willst?
Kommentiere über das alte Kommentarsystem (check wieder vorbei um zu sehen, ob ich geantwortet habe) oder G+

Questiosn, Feedback or something else you want to tell me?
Comment using the old system or G+ and make sure to check back to see if I answered