HTML Fortschrittsbalken

Veröffentlicht am von 6 Kommentare

Hallo,

endlich finde ich auch mal ein Thema das, wenn auch nur sehr kurz, so doch zu diesem Blog passt:
Ein HTML Fortschrittsbalken.

Gerade bei Seiten wie WP.com bekommt man einige HTML Restriktionen auferlegt, JS ist grundsätzlich nicht erlaubt.
Wie schafft man es jetzt also einen – ansprechenden – Fortschrittsbalken in solch einer Seite zu integrieren?
Die Antwort kann sehr simpel mit dem neuen progress-Tag in HTML5 gegeben sein, aber nur wenn der Browser auch halbwegs aktuell ist. Falls nicht wird einfach der Fortschrittsbalken ignoriert und die Information, die man seinen Lesern übermitteln möchte, sind weg.

Dafür habe ich jetzt ein kleines Tool zusammengestellt mit dem Ihr euch jetzt selbst einen Fortschrittsbalken generieren könnt, der auch bei alten Browsern noch alle Informationen an eure Leser bringt.

Beispiel (Progress-Tag):

Beispiel (Tool):

.
.
20%

>

Link: Fortschrittsbalken / Progressbar (HTML only)

Der Einbau in eurer WordPress ist sehr einfach und kann sowohl in einer Seite, als auch einem Artikel oder einem Widget geschehen.

1. Entscheidet euch, wo in eurem WordPress ihr einen Fortschrittsbalken haben möchtet.
2. Legt die entsprechende Seite/Widget/Artikel an.
3. Entscheidet euch für ein Balken-Design und kopiert den Text der hinter „Code:“ steht.
4. Kopiert den Code in der HTML-Ansicht an die entsprechende Stelle
5. Fertig!

Ich hoffe, ihr könnt so eure Seiten ein wenig aufpeppen!

Mit freundlichen Grüßen
Simon

6 Kommentare zu “HTML Fortschrittsbalken

  1. Hey du,

    habe dich auf dem Blog von Darkfairysenf entdeckt, mache nämlich auch bei der Lese-Challenge mit.
    Aber ich fand deinen Beitrag über den Fortschrittbalken sehr interessant. Bin leider kein IT Freak und raste regelrecht aus wenn ich was auf meinem Blog versuche einzurichten.
    Aber ich werde streng mal deiner Anleitung folgen und versuchen so einen Balken auf meinem Blog zu verewigen.
    Puuhhh 😉

    Nicht wundern wenn ich nochmal Fragen habe. Lach

    Liebe Grüße
    Alina
    Folge dir übrigens mal und hoffe es kommen noch viele hilfreiche Post.

    • Hallo Alina,

      schön das du auch bei der Lese-Challange mitmachst =) Ich komme derzeit leider kaum zum lesen, hoffe aber das sich das bald ändern wird.
      Gerne helfe ich dir falls du Probleme mit dem Code haben solltest, einfach fragen =)

      Falls du mal ein Thema bzw. einen Web-Wunsch (Kann man das so sagen? =D ) hast einfach melden.
      Ich muss ja gestehen ein wenig betriebsblind zu sein.

      Viele Grüße
      Simon

  2. Hallo Simon,

    ich hätte mal eine Frage zu dem Fortschrittsbalken. Soweit funktioniert dein Tool hervorragend, ich hab es auch hingekriegt, ihn noch ein bisschen anzupassen (border-radius, border color). Was ich allerdings nicht hinkriege, ist, das gute Stück zentriert auf der Seite zu platzieren. Könntest du mir vielleicht helfen und mir sagen, wo und wie ich den „align: center“-Befehl einfügen muss? Oder muss ich das vielleicht ganz anders angehen und kann „align“ gar nicht nutzen?
    Falls du dir gerade nicht vorstellen kannst, was ich meine, sag Bescheid, dann geb ich dir den Link zu der Seite, auf der sich der Balken jetzt befindet. 😉

    Viele liebe Grüße und Danke im Voraus,
    Elli

    • Hallo Elli,

      es freut mich das dir das Tool so gut gefällt =)
      gerne helfe ich dir weiter:
      Leider kannst du den align-Befehl nicht direkt benutzen, der ist eigentlich nur für Text da.
      Stattdessen kannst du den margin-Befehl nutzen, der gibt an welchen Abstand ein Container (z.B. das "<div>") zu seiner Umgebung hat.
      Praktischer weise gibt es da auch den Wert "auto", damit übernimmt der selbst die Berechnungen.
      Tausche einfach die erste Zeile von meinem Tool
      <div style="position:relative;margin:0px;width:99%;">
      durch
      <div style="position:relative;margin:0px auto;width:99%;">
      aus.

      Falls es aus irgendwelchen Gründen nicht klappen sollte kannst du dich gerne einfach nochmal melden. Dann müsste ich mir den Code auf deiner Seite, in die der Balken eingebunden werden soll, einmal ansehen.

      … Eigentlich würde ich sowieso gerne wissen wo du den einbindest. Bin doch neugierig =)

      Viele Grüße
      Simon

  3. Hallo Simon,

    das ist echt ein ziemlich cooles Tool – Du hast es so hervorragend beschrieben, wie es anzuwenden ist, dass selbst ich HTML no brainer alles verstanden habe. Wenn es ok ist, integriere ich es auf meiner Seite. Denn ich hab den genialen Tipp von der lieben Elli, die einen Challenge ausrichtet, an dem ich teilnehme.

    http://zeit-zu-lesen.de/challenges-2016/high-fantasy-challenge/

    Falls Du irgendwie auf der Seite namentlich erwähnt werden möchtest, sag mir bitte Bescheid.

    Vielen Dank für das Tool!!!

    Viele Grüße,
    Kati

Kommentar verfassen

%d Bloggern gefällt das:

Durch die Benutzung dieser Seite, dazu zählen unter anderem scrollen und navigieren, stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" konfiguriert, um Ihnen das beste Surferlebnis zu ermöglichen. Wenn Sie diese Website ohne Änderung Ihrer Cookie-Einstellungen verwenden, oder auf "Akzeptieren" klicken, erklären Sie sich mit der Verwenung der Cookies einverstanden.

Schließen