Suchfeld als Overlay


Hallo zusammen :)
Ich bin Myri aus dem KreaTief und darf euch heute wieder einen Gastpost präsentieren. Diesmal zeige ich euch, wie ihr ein Suchfeld in einem Overlay über dem Post platziert.

Aktuell könnt ihr euch das gerade auf meinem Blog ansehen, oder in einer vereinfachten Form im Demo, das ich geschrieben habe.

See the Pen Search Field Popup by Myri (@bekreatief) on CodePen.


Ein Suchfeld. Es darf vor allem auf einem vollen Blog nicht fehlen, aber oft braucht es so viel Platz. Das war der Grund, der mich dazu gebracht hat, mich auf die Suche zu begeben, nach einer Alternative zum Suchfeld irgendwo im Blog, wo man es auch nicht übersieht.
Im WWW habe ich ein paar coole Lösungen gefunden, wie etwas Suchfelder, die wachsen, sobald man sie anklickt, aber das war es noch nicht ganz. Diese Idee kam mir dann bei der Arbeit, als eines der Wordpress Themes, an denen ich arbeitete mit einem solchen Suchfeld ausgestattet war. Es war Liebe auf den ersten Klick.
Leider war das Script im Theme selbst nicht ganz so schön und voll mit Zeug, was ich nicht brauchen konnte. Also habe ich einfach eine einfache Version selbst geschrieben.

Folgend möchte ich euch zeigen, wie ihr eine Lupe in eurem Seitengadget platziert, die dann als Schalter für das Overlay dient.



1. Testblog

Ich empfehle immer einen Testblog, vor allem wenn ihr noch nicht so vertraut mit dem Code seid, solltet ihr das ganze zuerst in einem Testblog versuchen und erst wenn es dort geklappt hat, übernehmt ihr das für euren richtigen Post. Ich benutze im Beispiel mein Minima Responsive Template, aber das sollte mit jedem Template funktionieren. Falls ihr das Seiten-Gadget nicht verwendet, könnt ihr das ganze natürlich auch manuell machen, aber dazu gleich mehr. Startet also euren Testblog und wechselt dann in die HTML-Ansicht.





2. jQuery & Font Awesome

Für die Lupe verwenden wir eine Icon-Schrift. Mein Favorit ist Font Awesome, das lässt sich am einfachsten integrieren.

Ihr sucht nun nach

<b:skin>

und fügt oberhalb davon die aktuellste Version ein, in meinem Fall ist das 4.1.0

<!-- Font Awesome -->
<link href='//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css' rel='stylesheet'/>

Das javaScript läuft mit jQuery. Falls ihr das nicht schon in eurem Blog habt, müsst ihr das hinzufügen. Google hostet das netterweise für uns, wir müssen also nur noch einen Link platzieren.

Sucht in eurem Blog nach

</body>

und direkt obererhalb davon fügt ihr folgendes ein:

<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

3. JavaScript

Als nächstes kommen wir zum Javascript. Das ist ziemlich simpel und sagt im Grunde bloss, dass sich das Overlay öffnen soll, wenn wir die Lupe anklicken und wenn wir ausserhalb des suchfelds oder auf unser x klicken, soll sich das overlay wieder schliessen.

Das kopieren wir unter den jQuery-Link, den wir eben platziert haben.

<script>
$(document).ready(function(){
 $('a[href="#search"]').on('click', function(event) {                    
  $('#search').addClass('open');
  $('#search > form > input[type="search"]').focus();
 });            
 $('#search, #search button.close').on('click keyup', function(event) {
  if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
   $(this).removeClass('open');
  }
 });            
});
</script>



4. Markup

Okay, als nächstes kommt das Markup für unser Overlay. Das könnt ihr an beliebiger Stelle einfügen.
ich habe beschlossen es ans Ende des Blogs zu stellen, also einfach oberhalb des jQuery-Scripts.

In unserem Markup haben wir ein Suchfeld, mit einer Schliessen-Taste.
Ihr braucht darin nichts anzupassen, ausser ihr wollt z.B. den Text ändern, der angezeigt wird, bis man anfägt zu tippen. dafür ändert ihr was zwischen dem placeholder (placeholder="Platzhaltertext")steht.

<div id="search"> 
 <span class="close">X</span>
 <form role="search" id="searchform" action="/search" method="get">
  <input value="" name="q" type="search" placeholder="type to search"/>
 </form>
</div>



5. CSS hinzufügen

Okay, als nächstes kommt die CSS. Hier definieren wir wie das ganze aussehen soll.
Ich habe bei den wichtigsten Stellen kommentare hinzugefügt, die euch erklären sollen, was wir machen.

/* Search Style */ 
#search {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Hintergrundfarbe des Overlays */
    -webkit-transition: all 0.5s ease-in-out;
       -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
    -webkit-transform: translate(0px, -100%) scale(0, 0);
      -moz-transform: translate(0px, -100%) scale(0, 0);
       -ms-transform: translate(0px, -100%) scale(0, 0);
         -o-transform: translate(0px, -100%) scale(0, 0);
           transform: translate(0px, -100%) scale(0, 0);    
    opacity: 0;
    display: none;
}

#search.open {
    -webkit-transform: translate(0px, 0px) scale(1, 1);
       -moz-transform: translate(0px, 0px) scale(1, 1);
       -ms-transform: translate(0px, 0px) scale(1, 1);
        -o-transform: translate(0px, 0px) scale(1, 1);
            transform: translate(0px, 0px) scale(1, 1); 
    opacity: 1;
    z-index: 106;
    display: block;
}

/* Suchfeld Style */
#search input[type="search"] {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -51px;
    width: 60%;
    margin-left: 20%;
    color: rgb(255, 255, 255); /* Schriftfarbe */
   background: transparent;
   border-top: 1px solid rgba(255, 255, 255, .8); /* Rand oben */ 
   border-bottom: 2px solid rgba(255, 255, 255, .5); /* Rand unten */
   border-left: 0px solid transparent;
   border-right: 0px solid transparent;
    font-size: 40px; /* Schriftgrösse */
   font-family: Josefin Sans; /* Schriftart */
    text-align: center; /* Textausrichtung */
    outline: none;
   padding: 10px;
}
  
/* x-Link */
#search .close {
    position: fixed;
    top: 15px;
    right: 15px;
    opacity: 1;
    font-size: 27px;
   color: #fff;
}

#search .close:hover{
  cursor: pointer;
}

Und das fügt ihr oberhalb von ]]></b:skin> ein, oder im Vorlagendesigner bei CSS hinzufügen (oder in einem HTML-Gadget, dann aber die Style-Tags nicht vergessen).

Und speichern.

6. Link setzen

Nun, im Grunde ist das einzige Kriterium für den Suchlink, dass er nach #search führt. Ihr könnt also irgendwo einen Link platzieren, der das als Linkziel hat.
Wie gesagt, ich platziere ihn im Seitengadget, weil wahrscheinlich die meisten von euch das benutzen.
Das HTML von meinem Link, würde allerdings so aussehen. Font-Aweseome Icons werden in i-Tags platziert.

<a href="#search">
  <i class="fa fa-search"></i>
</a>

Okay, geht zu Layout und öffnet euer Linkgadget.



Dort wählt ihr externen Link hinzufügen und fügt folgendes ein:







Fertig!

Und dann seid ihr fertig!





Fragen, Probleme?

Wie immer stehe ich bei Fragen oder Problemen zur Verfügung. Schreibt über die Kommentare oder über das Kontaktformular auf meinem Blog.

Ich hoffe euch gefällt das Ergebnis und vielleicht finde ich ja demnächst ein paar Blogs mit einem Suchfeld-Overlay :)






15 Kommentare

  1. hallöchen :)

    ich habe ein kleines gewinnspiel gestartet und möchte dich herzlich dazu einladen ;)

    http://mondgras.blogspot.de/p/gewinnspiel.html

    vielleicht bis bald,

    heike

    AntwortenLöschen
  2. Ich bin erst vor kurzem auf euren Blog gestossen und arbeite mich gerade Post für Post durch um mal zu sehen, was alles so machbar wäre :) Ihr gebt euch wirklich soo viel Mühe, danke dafür!

    Ich habe eine Frage . Sie hat jetzt nichts mit diesem Tutorial hier zu tun, ich weiß aber nicht, wo ich sie sonst posten sollte. Wenn die Frage hier nicht erwünscht ist, dann bitte einfach ignorieren oder löschen wenn es sein muss.
    Mich würde nämlich brennend interessieren, wie man seinen Blog so gestalten kann wie diesen hier http://www.odernichtoderdoch.de/

    Also, dass auf der Startseite die Posts untereinander angezeigt werden, mit je einem schönen Titelbild und dem Anfang von dem Text. Ist sowas bei Blogger machbar??
    Kann mir da jemand was dazu sagen (in absolutem Anfänger-Blogger-Deutsch wenns geht :) ) ??
    Ich sag schon mal danke!!!

    AntwortenLöschen
    Antworten
    1. Hey :)
      Dafür gibt es viele Möglichkeiten. Du kannst zum einen deine Post direkt mit einem Bild anfangen und dann im Post-Editor in der HTML-Ansicht nach der Zeile nach der der Read More link erscheinen soll ein <!--more--> einfügen, das ist ein Jumplink.
      Möchtest du nicht, dass das Bild im Post angezeigt wird, sobald man draufgeklickt hat oder nicht selbst bestimmen, wo der Text unterbrochen wird, dann kannst du mir gerne über mein Kontaktformular auf meinem Blog Link schreiben und ich erkläre es dir.
      Liebe Grüsse
      Myri

      Löschen
  3. Super Tutorial! Danke dafür!
    http://tiffy-fee.blogspot.de/

    AntwortenLöschen
  4. Bei diesem Tutorial werden die Bilder nicht mehr angezeigt, würde mich freuen, wenn ihr die wieder rein macht!!!
    Liebe Grüße

    AntwortenLöschen
    Antworten
    1. http://www.copypastelove.de/2013/07/post-titel-und-datum-zentrieren.html

      Löschen
  5. Schöne Gestaltungsidee. Hab's gerade ausprobiert, funktioniert astrein. I like ;)

    AntwortenLöschen
  6. hey ich hab eine frage zum CSS, ich versteh die sache nicht so ganz. Was und wo soll ich es einfügen, damit ich die templates verändern kann.

    AntwortenLöschen
  7. hi, kann man die farbe des X wenn man einen suhbegriff eingegeben hat ändern? wenn man in das type to search reinklickt, erscheinen bereits suchbegriffe, fährt man mit der maus über einen dieser, wird das große suchfeld hellgelb hinterlegt, kann man das auch ändern? auf transparent meinetwegen?

    links neben meiner lupe erscheint noch hover objekt, als wäre eins zusätzliches da, ist es aber nicht... klicke ich drauf, komme ich zu meiner home seite:// wie kann ich das ändern...

    danke schon mal :)

    AntwortenLöschen
  8. Hat alles Lückenlos geklappt. Super Tutorial wenn man sich etwas einarbeitet. DANKE DANKE DANKE <3

    AntwortenLöschen
  9. Dankeschön, hat geklappt!
    Liebe Grüße Hanna

    AntwortenLöschen
  10. Hey, ich bin noch ganz neu mit meinem Blog und habe eben auf einem Testblog deine Anleitung ausprobiert und als das klappte habe ich es ganz mutig auf meinem eigentlichen Blog angewendet und es hat sogar funktioniert.
    Tausend Dank für diese leicht verständliche und ausführliche Anleitung.
    Liebe Grüße
    http://cupcakesneedlesandlife.blogspot.de/

    AntwortenLöschen
  11. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  12. Hallöchen,
    ich finde dieses Tutorial wirklich super. Bei mir ist jetzt nur das Problem, dass in meinem Menü die Schriftfarbe schwarz ist, die Lupe aber in meiner Linkfarbe angezeigt wird.
    Kann man das ändern? Ich hätte die Lupe auch gerne schwarz, bin auch schon am Rumprobieren, aber ich finde die richtige Stelle leider nicht.

    Liebste Grüße
    Kate ♥

    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!