{Tutorial} Schicke Suchleiste!

Hallo ihr Lieben!

Nachdem das letzte Tutorial anscheinend viele von euch gebrauchen konnten, dachte ich, ich mache irgendwann wieder eins und hab dann nach etwas gesucht, was man verschönern könnte. Prompt bin ich auf das Suchfeld gekommen. Sowas muss jeder Blog einfach haben, finde ich, wenn man nach einem bestimmten Buch oder so sucht.

UND DIESE HIER IST WIRKLICH HÄSSLICH!

Deswegen ändern wir das schnell um - viel Spass dabei! :D

Es gibt übrigens zwei Varianten. Eine einfachere, die schnell geht und normal aussieht und eine ein bisschen komplizierte, bei der das Ergebnis vieeeel besser aussieht. Aber daran könnt ihr euch auch wagen, ist eigentlich ganz einfach.

Einfache, simplere Suchfunktion

Das Ergebnis könnt ihr bei uns in der Sidebar sehen oder auf der Seite 'Rezensionen' // 'Anderes'.

Wieder einmal braucht ihr einen HTML-Code dafür,  aber der ist wirklich gaaaaaaaanz klein. Er sieht nämlich so aus.

<form action='http://EUREBLOGURL/search' method='GET'><input name='q' type='text'/></form>

Okay? :D Also, logischerweise fügt ihr bei EUREBLOGURL die Webadresse eures Blogs ein.

So, nun haben wir es ganz klassisch und können es noch nach DEINEM Belieben abändern. Es ist wirklich ganz einfach!

Dazu braucht ihr ein bisschen CSS. Das ganze könnt ihr hier unten sehen. Diese '#......' sind Bezeichnungen für Farben. Du kannst dir deine Farbe einfach HIER aussuchen und den angezeigten Code zwischen "input" und "name" einfügen.

style='border: 1px solid #dbdbdb; background-color: #f4f4f4;' 

Der Teil 'border: 1px solid #dbdbdb;' definiert einen Rand. '1px' definiert die Breite, Grösse des Randes. (Also wie dick der Rahmen sein sollte.) 'solid' ist englisch für 'gerade'. Daneben stehen euch noch 'dotted' /gepunktet/ und 'dashed' /gestrichelt/ zur Verfügung als Befehl. Danach kommt die Farbbezeichnung, die der Rahmen haben soll.

Um den Hintergrund noch weiss zu verfärben, lässt ihr den Teil 'background-color: #f4f4f4' einfach so. Wenn ihr in aber vielleicht... pink wollt (hoffentlich nicht!) könnt ihr eine andere Farbe hinter das Hashtag setzen.

Suchen kann man damit mit ENTER. Den Code fügt ihr einfach als HTML-Gadget ein.

-------------------------------------------------------------------------------------------------------------------------

Schwierigere, schickere Suchfunktion

Es gibt aber noch eine schickere Variante, die aufwändiger ist. Jaaaaa, richtig gehört! :D

Erstmal den Code (Danke, Myri!)

/** * Suchfeld mit Lupe */

.searchfield{
position: relative;
border: dotted 1px #D6D4D5;
padding: 3px;
background: url(https://googledrive.com/host/0Bz6HRVCs7oBaS0R2cTFvRDM4bzA/) no-repeat right;
width: 150px;
transition: .3s linear;
font-family: Arial;
}

.searchfield:Focus{
border: solid 1px #D6D4D5;
width: 170px;
transition: .3s linear;
}

So, und nun erkläre ich euch  das Ganze, das heisst, die DICK MARKIERTEN Sachen. Der Rest übernehmt ihr am einfachsten so.

.searchfield{ Das ist der Titel und das darunter definiert einfach, wie das Suchfeld aussehen sollte.

border: dotted 1px #D6D4D5; heisst wieder Rahmen. Wie oben schon beschrieben könnt ihr 'dotted' /gepunktet/, 'dashed'  /gestrichelt/ oder 'solid' /durchgezogen/ aussuchen. So wird dann der Rahmen des Suchfeldes. '1px' definiert die Breite dieses Rahmens, der Hashtag mit den sechs Zeichen dahinter (nennen wir ab jetzt HEX-CODE) die Farbe. Zum Aussuchen der Farbe könnt ihr den Link oben benutzen.

background: url(https://googledrive.com/host/0Bz6HRVCs7oBaS0R2cTFvRDM4bzA/) no-repeat right; Das ist wohl der komische Teil, aber kein Problem. Der ist nur für die 'Schickness' zuständig. Dadurch kommt am Ende des Suchenfeldes so eine kleine, schnuckelige Lupe! :)

width: 150px; Das passt ihr an die Grösse der gewünschten Stelle an. Das heisst, wenn ihr eine 200px grosse Sidebar habt und die Suchleiste ein wenig kleiner möchtet, verändert ihr die Zahl in 190px oder so.

font-family: Arial; Schriftart - ihr kennt es alle! :D

.searchfield:Focus{ Jetzt kommt der spannende Teile! Unter diesem Titel sind nämlich die Styleangaben dafür, wenn jemand etwas in das Suchenkästchen  reinschreibt. :D

border: solid 1px #D6D4D5;width: 170px; In diesem Code wird das Suchenfeld dann fest umrahmt und breiter! Hier könnt ihr wieder wie oben alles abändern, wie ihr wollt. :)

Das Ganze war es aber noch nicht.  Wenn ihr diesen Code übernehmt, müsst ihr noch einen ganz ähnlichen Code wie oben nochmals einfügen. Und zwar geht ihr dafür auf 'Vorlage' und dann auf 'HTML anpassen' und fügt folgenden Code zwischen <body> und </body> ein. :)

<form action='DEINEBLOGURL' method='GET'><input name='q' type='text' class="searchfield" placeholder="Search"/></form>

Hier gibt es noch zwei kleine Sachen zu machen // abändern. Bei 'DEINEBLOGURL' kommt wieder deine Blog URL rein. Und bei "Search" kommt der Text rein, der im Feld stehen sollte, bevor man sucht. Bei unseren Rezensionen steht zum Beispiel der Text 'Doch nicht das richtige Buch gefunden?' drinnen. Dieser verschwindet aber, sobald jemand etwas reinschreibt. Suchen könnt ihr übrigens dann mit einem einfachen Drücken der ENTER-Taste. :D

Den grossen Code fügt ihr entweder in eure Sidebar als HTML Gadget oder, wie wir, auf eine Seite.

FERTIG!

So, seid ihr mit meinem Tutorial zu Schlag gekommen oder braucht ihr noch irgendwo Hilfe? Einfach in die Kommentare! Wir freuen uns natürlich IMMER! :D

Wollt ihr auch mehr so kleine Tutorials oder findet ihr diese unnötig?

Alles Liebe,

Mara