Wie erstelle ich einen Fortschrittsbalken? [Tutorial] MIT EDIT

28. September 2012 | 51 Kommentare


Hallo ihr Lieben!

Da es ja doch mehrere Interessenten bezüglich des "Fortschrittsbalken" (bzw. Progressbar) gab, gibt es heute ein kleines Tutorial ;) Es ist echt total einfach, und ich finde, selbst wenn es nur eine Kleinigkeit ist, verschönert es jeden Blog.

EDIT: Mara von Wonderful {nothing else} Books hat eine bessere Lösung gefunden, die ich auch selbst nutze! Vom Aufwand ist der Code etwa gleich, aber deutlich leichter strukturiert, formbarer und weniger anfällig für Fehler. Bitte verwendet ihren Code!!

Ihr geht auf euer Blogger-Dashboard, dann auf das Layout. Fügt in der Sidebar ein HTML/Javascript-Gadget hinzu. Hier kopiert ihr diesen Code rein:

<div class="art-block widget widget_progressbar" id="progressbar-6"><div class="art-block-body"><div class="art-blockcontent"><div class="art-blockcontent-body"><style type="text/css">

#progressbar {   width: 60%;   height: 10px;   background-color: #F5F5F5;   border: 2px solid none;   margin: 0;   padding: 0;}

#progressbar div {   height: 100%;   background-color: #FFBDFD   border-right: 2px solid none;    margin: 0;   padding: 0;}</style> 
<div id="progressbar" style="margin: 0 style="><div style="width:40%"></div></div> <p style="text-align: left;">BUCHTITEL Seite 0 von 500</p></div></div> </div></div>

Ich weiß es sieht für HTML-Anfänger sicher etwas beängstigend aus, aber es ist wirklich nicht schwer.

Dieser Teil bestimmt, wie breit der Balken sein soll. Die 60% könnt ihr ruhig so stehenlassen.

Dieser Teil bestimmt, wie hoch der Balken sein soll. Auch diese Zahl müsst ihr nicht ändern.

Diese Teile zeigen, welche Farben der Balken haben soll. Eine Farbauswahl findet ihr hier oder hier

Hier ist der klitzekleine Haken: Der Code kann die Prozentzahl nicht allein berechnen. Diese Zahl muss man 
bei jedem Fortschritt manuell eingeben. Das sollte aber kein allzu großes Problem sein, mithilfe dieser Website. (Bsp.: 111 ist wie viel Prozent von 330?)

Auch diesen Teil muss man verständlicherweise selbst anpassen. 

Jetzt auf speichern - das war's! Nun könnt ihr euren Blog ansehen und bei Bedarf den Balken nochmal anpassen. Leichter als gedacht, oder? ;)

51 Kommentare

  1. Tolles Tutorial! Ich werde es selbst wohl erstmal nicht anwenden, aber habe auch schon oft drüber nachgedacht, sowas zu machen und nie herausgefunden, wie das denn geht. Danke dafür, das wird sicher einigen weiterhelfen! ^^

    Liebe Grüüüße (; ♥

    AntwortenLöschen
    Antworten
    1. Danke :D Das wollen wir mal hoffen!

      Alles Liebe :) ♥

      Löschen
  2. Hallihallo,
    Das ist wirklich ein sehr schönes Tutorial... vorallem weil ich nach so einem schon lange gesucht habe...
    Sag mal kannst du mir Seiten empfehlen indem es Tipps zum verschönern der Blogges gibt???

    LG Marie :DD <3

    AntwortenLöschen
    Antworten
    1. Genau deshalb hab ich eines verfasst, weil es von denen noch nicht wirklich viele gibt.
      Sehr empfehlenswerte Seiten sind auf jeden Fall The Cutest Blog on the Block (ist allerdings auf englisch) und meine persönliche Lieblingsseite, CopyPasteLove :) Stöber mal durch, macht richtig Spaß.

      Alles Liebe ♥

      Löschen
    2. Ach Dankeschööön^^

      diese Seiten haben mir total geholfen :D

      LG Marie

      Löschen
  3. Super Tutorial! Hat mir sehr geholfen. Besten Dank!
    Lg Shellan

    AntwortenLöschen
  4. Whaaa du bist ja super *__* <3 Ich wollt das schon die ganze Zeit haben, aber ich hab weder was im Inet gefunden noch konnte mir jemand sagen wie das geht <333

    Danke <3 Echt toll mit dem Tuto <3

    GLG JuFax3

    AntwortenLöschen
    Antworten
    1. Freut mich wirklich, dass ich dir helfen konnte! :) ♥

      Löschen
  5. Das ist ja super! Dankeschön!
    ...auch schon selbst ausprobiert :)

    Glg Sandra

    AntwortenLöschen
  6. Tolles Tutorial!Werde das irgendwann mal einbauen,aber immoment habe ich keine Lust dazu.

    LG May

    AntwortenLöschen
  7. Wie cool. Danke danke danke.

    Werde mich morgen gleich mal dran setzen und das auch ausprobieren. Wirklich super lieb von dir.

    LG
    Sabrina

    AntwortenLöschen
    Antworten
    1. Ich war auch total begeistert :D Sieht echt toll aus und ist nicht wirklich viel Aufwand.

      Alles Liebe!

      Löschen
  8. Vielen Dank ;*
    Tolles T. gut zu verstehen! Danke!

    lg, gina ;)

    AntwortenLöschen
  9. Vielen, vielen Dank!

    Muss ich unbedingt gleich ausprobieren! Du hast das so schön erklärt, da sollte das auch gar keine so grosse Sache werden =)

    Liebe Grüsse
    Vanessa

    AntwortenLöschen
    Antworten
    1. Ja, es ist wirklich keine allzugroße Sache. Viel Spaß beim Ausprobieren und gerne (:
      Alles Liebe!

      Löschen
  10. Danke danke danke danke danke danke danke! :)

    AntwortenLöschen
  11. Ich danke dir!
    Hab es gleich bei mir eingebaut :)

    AntwortenLöschen
  12. Jawohl, nach sowas habe ich immer gesucht! :)
    Jetzt hab ich auch endlich so ein "ich lese gerade"-gadget.
    Ich schließe mich den Danksagungen der oberen Kommentare an.

    Liebe und zufriedene Grüße
    Misty

    AntwortenLöschen
    Antworten
    1. Ist schon toll, oder? Ich finds auch total super. Schön, dass du zufrieden bist! :)
      Alles Liebe

      Löschen
  13. So, ich habe den Balken auch einmal bei mir eingebaut. Jetzt muss ich nur noch schauen, dass ich den auch aktuell halte . . .
    Herzlichen Dank fürs Tutorial.

    lG Favola

    AntwortenLöschen
  14. Tut mir leid das ich erst jetzt antworte, aber hab total vergessen das ich bei Books and Senses gefragt hatte mit dem progress Balken.
    Vielen dank für das Tutorial ich werd es sofort ausprobieren =)

    Lg Pia

    AntwortenLöschen
  15. Hallo Sandra,

    dein Tutorial gefällt mir gut, würde es dir etwas ausmachen, wenn ich es bei Copypastelove posten würde? Ich werde dich natürlich erwähnen! :)

    Meld dich bei mir! gastpost@cplove.de

    Lg Mira :)

    AntwortenLöschen
  16. Hallo,
    Danke, danke, DANKE! :D
    Ohne dieses Tutorial hätte ich es nie geschafft!

    lg :)

    AntwortenLöschen
  17. Hallo Sandra!

    Danke für das tolle Tutorial! Sag mal weißt du wie ich den Balken zentriere wenn ich ihn in einen Post einfüge? Habe selber schon ein bisschen ausprobiert hat aber leider nicht funktioniert.

    Schon vorher danke!
    Lg Krisi

    AntwortenLöschen
    Antworten
    1. Liebe Krisi,

      Wollte grade ganz zerknirscht eingestehen dass ich das selbst nicht weiß, weil es mit center nicht funktionieren will, aber nicht mit mir! Nicht mal um halb zwei in der Nacht! :D *hier* Statt dieser Stelle

      <div id="progressbar" style="margin: 0 style=;">

      machst du diese Stelle

      <div id="progressbar" style="margin: 0 style=; margin-left: 140px;">

      also nur ein "margin-left" dazu :) Hoffentlich ist das verständlich. Die Pixelanzahl musst du vergrößern oder verkleinern, je nachdem ob es nicht genug oder zu weit links ist (die Pixelanzahl wird vom linken Rand aus berechnet). Ein bisschen umständlich aber hey, immerhin funktionierts ^^

      Alles Liebe!


      Löschen
    2. Hat geklappt! Vielen Dank!

      Löschen
  18. Ich klicke mich gerade durch deine Tutorials und die sind wirklich spitze! Wie bekomme ich die Seitenzahlen denn so in die Mitte des Balkens wie du? Das wäre noch super zu wissen!

    Liebe Grüße
    Barbara

    AntwortenLöschen
    Antworten
    1. Danke :) Ich habe sie mit <p style="text-align: center;">SEITENZAHL</p> zentriert, sollte klappen, ginge wahrscheinlich genauso auch mit <center>...</center>.

      Löschen
  19. Super Tutorial! ;-)
    Kann ich auch noch irgendwie die Farbe von "Seite 111 von 330" ändern?

    Alles Liebe <3, Janine

    http://janine2610.blogspot.co.at/

    AntwortenLöschen
    Antworten
    1. Hallo Janine,

      Dazu setzt du die Seitenzahl einfach ein einen style-Befehl. Also ungefähr so:
      <span style="color: #E2B5D0;">SEITENANZAHL</span>

      Aber vom vorherigen Code bitte nix löschen :) Das #E2B5D0 ist irgendeine Farbe, hier kannst du dir eine aussuchen: http://www.colorpicker.com/

      Löschen
  20. Omg, vielen herzlichen Dank für dieses Tutorial :)

    AntwortenLöschen
  21. Vielen lieben Dank!!!!!! :)

    http://venetialovesbooks.blogspot.de

    AntwortenLöschen
  22. Moin,
    vielen Dank für die Anleitung. Leider bekomme ich es nciht raus, wie der Balken kleiner wird, ohne das er auf der linken Seite stehen bleibt. Setze ich "center" davor, dann wird er drei geteilt. Wenn die % Zahl verringert wird, bleibt er auf der linken Seite stehen.
    Hast Du vielleicht eine Lösung?
    Vielen Dank und liebe Grüße
    Angela

    AntwortenLöschen
    Antworten
    1. Liebe Angela,

      Dafür habe ich leider selbst noch keine Lösung! Mir ist auch schon aufgefallen dass sich der Balken nicht ordentlich zentrieren lässt, was echt Käse ist, einfach weil es mich ärgert. Nach einigem Ausprobieren und Umschreiben geht manchmal gar nichts mehr, aber irgendwann - IRGENDWANN! *Balken mit Faust droh* - werd ich was dafür finden. Tut mir leid!

      Löschen
  23. Oh danke, sowas habe ich gesucht! :)
    Ganz liebe grüße, Vivien von l0ve-life (Bücherblog) :)

    AntwortenLöschen
  24. Hallo und vielen Dank für die tolle Anleitung, so habe auch ich das verstanden.
    Eine Frage habe ich allerdings noch, wie bekomme ich denn das Cover des Buches dorthin? (Jedes einzeln beim Verlag besorgen, abspeichern und einfügen oder gibt es da auch einen anderen legalen aber noch einfacheren Weg?)
    Viele Grüße

    AntwortenLöschen
    Antworten
    1. @Lary: vielen Dank!

      Hallo analog,
      Meines Erachtens ist es völlig legal, Buchcover (direkt von der Website des Verlags - die meisten Verlage stellen extra hochauflösende Cover zum Download zur Verfügung) unverändert in eine Website einzubinden. Im besten Fall erwähnt man im Impressum noch ausdrücklich, dass die Rechte der Buchcover beim jeweiligen Verlag liegen. Wenn man die Quelle unbedingt noch direkt im Post angeben möchte, finde ich es die schönere Lösung, das Bild gleich auf die Verlagsseite zu verlinken. Sonst könnte man den Link einfach reinkopieren, sieht aber optisch nicht so schön aus.
      Dazu musst du das Bild nicht runterladen, ich finde es via URL einfacher. Einfach das Cover rechtsklicken und "Bild-URL kopieren".

      Das ist ja blöd - habe ich das im Tutorial wirklich nicht erwähnt? Wenn ich dran denke werde ich gleich dieses Wochenende eine aktualisierte Version posten, die ein wenig leichter zu handhaben und weniger fehleranfällig ist. Vorläufig würde ich dir empfehlen, direkt über dem HTML-Gadget ein Bild-Gadget mit dem Cover einzufügen.

      Alles Liebe, Sandra

      Löschen
    2. Vielen Dank für die schnelle Antwort.
      Nur nicht das hier ein Missverständnis entsteht, natürlich ist es legal die Cover der Verlage in deren vorgegeben Rahmen zu benutzen, viele erlauben das ja schließlich auch ausdrücklich. Ich hatte mich da wohl doch etwas blöde ausgedrückt.
      Was dein Tipp angeht, ich glaube ich weiß was du meinst. Probiere mich da später noch mal durch. Danke. ;-)
      Lg Rena

      Löschen

Ich schätze es sehr, dass du dir die Zeit nimmst und die Mühe machst, mir deine Meinung oder dein Feedback zu hinterlassen! Ist der Beitrag schon etwas älter, wird dein Kommentar nicht gleich sichtbar sein, sondern muss zuerst von mir freigegeben werden.

© 2012 - 2016 Pusteblume? · Powered by Blogger · Datenschutz · Impressum