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.
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 :)
tolles Tutorial! :)
AntwortenLöschenmich würde es aber noch interessieren wie man eine lupe als hintergrundbild einfügt.
Love Joe♡
Das kann man mit einem Pseudoelement machen.
LöschenDazu 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 :)
Oh, mir ist gerade noch eine einfachere Lösung eingefallen, als ich grad nochmal rumprobiert hab ^^
LöschenDankeschön für die Erklärung!
LöschenLove Joe♡
Geht sogar noch leichter in dem man nach dem #f4f4f4 einfach:
Löschenbackground: url(https://googledrive.com/host/0Bz6HRVCs7oBaS0R2cTFvRDM4bzA/) no-repeat right;
einfügt. :)
Ihr seid super! Frina, ich habe jetzt deinen Code verwendet. Hat funktioniert und sieht super aus!
LöschenVielen Dank und liebe Grüße,
Miri
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?
Löschendiefabelhafteweltderbuecher.blogspot.com
Danke schon im Voraus :)
Danke für's beantworten der Frage ;)
AntwortenLöschenDas neue Design ist hübsch!
Liebst,
Melon
Wie bekommt man es eigentlich hin, dass man das suche feld oben platzieren kann? ich finds bei dir viel schöner als irgendwo links.
AntwortenLöschenwürde mich über eine antwort freuen ^^
irgendwie verstehe ich das tutorial nich5, wo soll man die links einfügen?
LöschenWelche Links meinst du?
LöschenWie 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 ;)
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öschenAlso, Myris Ansatz, dem Suchfeld eine CSS-Klasse zuzuweisen ist schon richtig.
LöschenIn 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 :)
Danke :) werde es gleich ausprobieren :)
AntwortenLöschenDanke, habe es direkt geändert, fand das von google auch nie wirklich schön! :-D
AntwortenLöschenich habe ein suchfeld erstellt, hätte es aber gerne rechts oben statt links oben. Kann man das ändern?
AntwortenLöschenJa, bei style noch das hier zwischen die Klammer:
Löschenfloat:right;
Passt jetzt nicht zum eigentlichen Thema, aber ich weiß irgendwie nicht, wie ichs dir sonst schreiben soll :)
AntwortenLöschenIn 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 :)
Das mit der Lupe bekomme ich einfach nicht hin...kann das einer nochmal erklären?
AntwortenLöschenSupi, das hat super geklappt! DANKE! :)
AntwortenLöschenIch 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
AntwortenLöschenOBWOHL 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 ... -_-'
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....
AntwortenLöschenund 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
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öschenEinfach genial eure DIY´s ... fix mal einen Kaffee spendiert ;) Liebe Grüße, Gesa
AntwortenLöschenDanke dir! Schön dass dir unsere "DIY"s gefallen :)
LöschenDanke für die Anleitung. :-)
AntwortenLöschenDanke! Hat mir sehr weitergeholfen!
AntwortenLöschenLiebe Grüße
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