Simple Suchfunktion ♥


Ihr mögt die Google-Suchfunktion als Widget genauso wenig wie ich?
Dann habe ich eine einfache und ansehnliche Lösung für euer Problem :)
Wenn ihr euch ein wenig mit HTML auskennt, könnt ihr das Suchfeld ganz einfach innerhalb eures Designs platzieren, ihr könnt aber auch ein HTML-Widget erstellen und den Code dort einfügen.


Die Suche lässt sich entweder durch Drücken von Enter betätigen oder durch Klicken eines Suche-Buttons. Welche Variante ihr besser findet und auf eurem Blog einbauen möchtet, ist euch überlassen. Anschließend werden die Ergebnisse nach Relevanz geordnet in Form der passenden Posts angezeigt. Ihr könnt euch das zur Demonstration auf meinem Blog vanillebrause anschauen ;)


Mit "Suchen"-Button

<form action='http://EUREBLOGURL/search' method='GET'><input name='q' type='text'/><input type='submit' value='Suchen'/></form>
Diesen Code passt ihr an euren Blog an (EUREBLOGURL entspricht der Adresse eures Blogs, "Suchen" könnt ihr zum gewünschten Text des Buttons ändern) und fügt ihn entweder in einem HTML-Widget ein oder an der gewünschten Stelle in eurem Layout.

Ohne "Suchen"-Button

<form action='http://EUREBLOGURL/search' method='GET'><input name='q' type='text'/></form>
In diesem Fall ist der Code noch simpler. Ihr fügt ihn wieder dort ein, wo ihr ihn benötigt, also entweder in ein HTML-Widget oder an passender Stelle in den Quellcode eures Layouts.


Suchfeld mit CSS anpassen

Das Suchfeld, wie ihr es auf dem Vorschaubild sehen könnt, habe ich mithilfe von CSS gestaltet. Um ein ähnliches Aussehen zu erreichen, könnt ihr euren Code um Folgendes ergänzen (an der Stelle zwischen "input" und "name")
style='border: 1px solid #dbdbdb; background-color: #f4f4f4;' 
Ihr könnt euer Suchfeld ganz individuell gestalten, wenn ihr ein paar CSS-Befehle kennt. Beispielsweise habe ich eine kleine Lupe als Hintergrundbild eingefügt - ein hübscher Effekt!

Ich hoffe, das Tutorial war relativ verständlich und wenn ihr noch Fragen habt, lasst es mich in den Kommentaren wissen :)

28 Kommentare

  1. tolles Tutorial! :)
    mich würde es aber noch interessieren wie man eine lupe als hintergrundbild einfügt.
    Love Joe♡

    AntwortenLöschen
    Antworten
    1. Das kann man mit einem Pseudoelement machen.

      Dazu einfach HTML anpassen, indem der input durch eine klasse ergänzt wird (<form action='http://EUREBLOGURL/search' method='GET'><input name='q' type='text' class="searchfield" /></form>) und dann sähe die CSS wahrscheinlich irgendwie so aus:

      .searchfield{
      position: relative;
      }

      .serachfield:after{
      content: url(https://googledrive.com/host/0Bz6HRVCs7oBaS0R2cTFvRDM4bzA/); /* Lupenbild URL */
      height: 22px; /* Bildhöhe */
      width: 22px; /* Bildbreite */
      position: absolute;
      right: 10px; /* Abstand von rechts */
      top: 50%;
      margin-top: -11px;
      }

      Das würd man dann entweder zwischen zwei Style-Klammern schreiben, oder im Vorlagendesigner oder im HTML selbst. Sollte so klappen.
      Einfacher geht's natürlich mit icon-fonts wie Font Awesome, da müsst man's dann allerdings ins Markup einbinden.

      Hoffe das beantwortet die Frage :)

      Löschen
    2. Oh, mir ist gerade noch eine einfachere Lösung eingefallen, als ich grad nochmal rumprobiert hab ^^

      Löschen
    3. Dankeschön für die Erklärung!
      Love Joe♡

      Löschen
    4. Geht sogar noch leichter in dem man nach dem #f4f4f4 einfach:

      background: url(https://googledrive.com/host/0Bz6HRVCs7oBaS0R2cTFvRDM4bzA/) no-repeat right;

      einfügt. :)

      Löschen
    5. Ihr seid super! Frina, ich habe jetzt deinen Code verwendet. Hat funktioniert und sieht super aus!

      Vielen Dank und liebe Grüße,
      Miri

      Löschen
    6. Kann einer von euch mal bei mir noch drübergucken? Hab jetzt den Code von Miri genommen, damit ich die Lupe sehen kann. Allerdings hätte ich gerne den Hintergrund durchgehend in meinem Grau, damit die Lupe nicht mit nem weißen Hintergrund hinterlegt ist. Wie kann ich das machen?

      diefabelhafteweltderbuecher.blogspot.com

      Danke schon im Voraus :)

      Löschen
  2. Danke für's beantworten der Frage ;)
    Das neue Design ist hübsch!

    Liebst,
    Melon

    AntwortenLöschen
  3. Wie bekommt man es eigentlich hin, dass man das suche feld oben platzieren kann? ich finds bei dir viel schöner als irgendwo links.
    würde mich über eine antwort freuen ^^

    AntwortenLöschen
    Antworten
    1. irgendwie verstehe ich das tutorial nich5, wo soll man die links einfügen?

      Löschen
    2. Welche Links meinst du?
      Wie du das Feld oben platzierst, hängt davon ab, wie das Grundgerüst deines Designs aufgebaut ist. Ich habe dazu einen div-Container über meinem Header erstellt, in dem sich meine Suche befindet. Man sollte das lieber erst versuchen, wenn man über fortgeschrittene HTML-Kenntnisse verfügt. Sonst macht man leider schnell ganz viel kaputt ;)

      Löschen
  4. Bei mir klappt das alles nicht, ich bekomme zwar ein Suchfeld aber ich kriege es nicht an die Stelle wo es sein soll. Und bei mir sieht es auch anders aus, habe die CSS von Myri genommen aber so wie in der Vorschau dort sieht es nicht aus :(

    AntwortenLöschen
    Antworten
    1. Also, Myris Ansatz, dem Suchfeld eine CSS-Klasse zuzuweisen ist schon richtig.

      In deinem CSS-Code sollte dann allerdins folgendes stehen:
      .searchfield {
      border: 1px solid #dbdbdb;
      background-color: #f4f4f4;
      padding-right: 20px;
      padding-left: 5px;
      background-image: url('URLDEINESLUPENBILDES');
      background-position: right;
      background-repeat: no-repeat;
      height: 24px;
      width: 200px;
      }

      Hoffe, das hat dir weitergeholfen :)

      Löschen
  5. Danke :) werde es gleich ausprobieren :)

    AntwortenLöschen
  6. Danke, habe es direkt geändert, fand das von google auch nie wirklich schön! :-D

    AntwortenLöschen
  7. ich habe ein suchfeld erstellt, hätte es aber gerne rechts oben statt links oben. Kann man das ändern?

    AntwortenLöschen
    Antworten
    1. Ja, bei style noch das hier zwischen die Klammer:

      float:right;

      Löschen
  8. Passt jetzt nicht zum eigentlichen Thema, aber ich weiß irgendwie nicht, wie ichs dir sonst schreiben soll :)
    In deiner sidebar sind ja diese Follow-Gadgets und darunter auch das Follow by Email-Gadget, aber bei mir ist dieses viel länger :o kann man das irgendwie kürzer machen, so wie du das hast?
    Würde mich über eine Antwort sehr freuen :)

    AntwortenLöschen
  9. Das mit der Lupe bekomme ich einfach nicht hin...kann das einer nochmal erklären?

    AntwortenLöschen
  10. Supi, das hat super geklappt! DANKE! :)

    AntwortenLöschen
  11. Ich verstehe alles, könnte mir auch mit CSS ein schickes Aussehen basteln, aber das bringt mir alles nichts, wenn ich nichts durchsuchen kann! Bei mir kommt dauernd diese Meldung: http://i39.tinypic.com/11c71oj.png

    OBWOHL MAN DA KAUM WAS FALSCH MACHEN KANN!!! /: Mit der Suche von Google kann ich übrigens auch nichts durchsuchen, wahrscheinlich ist mein Blog such-immun oder so ... -_-'

    AntwortenLöschen
  12. Also bei mir klappt das leider überhaupt nicht... wenn ich in die html vorlage gehe und um es zu ändern bzw einzubauen, dann weiß ich zum einen nicht wo und wie... es kommt dauernd ne falsche Anzeige... das Suchfeld und dahinter - auch auf dem richtigen Blog... das ganze andere Gedöns als Geschriebenes....

    und wenn ich über Vorlage und dann CSS gehe, dann passiert gaaar nix... Menno :(

    Also ich würde mich wahnsinnig freuen, wenn mir einer helfen kann ...ich bin nämlich echt am Verzweifeln :'(

    verzweifelte Grüße aus der Grafschaft
    Annie von Annies Beauty House

    AntwortenLöschen
  13. Kann evtl nochmal jemand GENAU schreiben, wie man das mit dem Lupenbild hinbekommt und -vor allen Dingen- WO GENAU ich den Code hinpacken soll? ;s

    AntwortenLöschen
  14. Einfach genial eure DIY´s ... fix mal einen Kaffee spendiert ;) Liebe Grüße, Gesa

    AntwortenLöschen
    Antworten
    1. Danke dir! Schön dass dir unsere "DIY"s gefallen :)

      Löschen
  15. Danke! Hat mir sehr weitergeholfen!
    Liebe Grüße

    AntwortenLöschen
  16. hey :) dankeschön, aber irgendwie komme ich nicht so klar :/ ich kenne mich gar nicht mit sowas aus muss ich dazu sagen, aber wenn ich diesen code mit SUCHEN kopiere und dann einfüge, dann kommt zwar die leiste und das SUCHEN, aber wenn ich dann in die Besuchersicht gehe und was eingebe und auf SUCHEN klicke, dann wird nichts gesucht.. dann verschwindet das SUCHEN nur irgendwie xd keine ahnung, ob mir da jemand helfen kann :D

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!