Wie erstelle ich ein Lesefortschritt-Gadget? (aktualisiert) [Tutorial]

1. Februar 2015 | 35 Kommentare

Heute gibt es die aktualisierte Version eines Tutorials, das ich schon mal gepostet hatte - 2012 nämlich. Diesen Code finde ich mittlerweile so katastrophal und fehleranfällig, dass ich das nicht weiterhin so stehen lassen kann. Folgender Code basiert nun auf einer Version von WONDERFUL {nothing else} BOOKS, die ich für mich persönlich ein klitzekleines bisschen abgewandelt habe. Danke, Mara!
Zum Verständnis: Zwei Balken werden dabei quasi übereinandergelegt, wobei man einen davon (den linken) mit seinem Lesefortschritt wachsen lässt.

Um den Code zu nutzen, geht ihr einfach auf euer Layout, erstellt ein neues HTML/Javascript-Gadget und fügt Untenstehendes ein. Wie wo was verändert wird, steht unten.


Harry Potter 7
Seite 211 // 768
Etwas schleppend

<center>
<img src="Bild-URL des Covers"
     alt="Titel des Buches"
     title="Titel // Autor"
     style="width: 170px;" />
<br />
<br />
<div style="background: none repeat scroll 0% 0% #F2F2F2;
            border-radius: 5px;
            border: none;
            text-align: left;
            height: 15px;
            width: 185px;">

<div style="background: none repeat scroll 0% 0% #FFDEF4;
            border-bottom-left-radius: 5px;
            border-top-left-radius: 5px;
            height: 15px;
            width: 40%;">
</div>
</div>
<p>Seite 210 // 460<br />Platz für Eindrücke</p>
</center>


width: 170px; Breite des Covers (Höhe passt sich an)
border-...: 5px; Abrundung der Ecken (je höhere Zahl, desto runder)
height: 15px; Höhe des Balkens
width: 185px; Länge des Balkens
width: 40%; Lesefortschritt (wie viele % hast du schon gelesen?) via Prozentrechner
#FARBE; Farbe der Balken (2 verschiedene) via Colorpicker
width: 185px; Länge des Balkens


Wieso ...

... "alt"? "alt" steht für Alternativtext und hat den Vorteil, dass dieser Text angezeigt wird, wenn das Bild (aus irgendeinem Grund) nicht funktioniert. So weiß man z.B. trotz fehlendem Cover, um welches Buch es sich handelt.

... "title"? Weil es einfach schick ist. Wenn man mit dem Cursor über das Bild fährt, erscheint dieser Text (sinnvoll sind ganzer Titel & Autor).

... "center"? Ist dazu da, um das ganze in der Sidebar schön zu zentrieren, damit Bild und Schrift nicht links an der Seite kleben.

Ich möchte nochmal betonen, dass der Code von Mara stammt und ich ihn nur nach meinem Geschmack angepasst habe. Wenn ihr Schwierigkeiten oder Fragen habt, schreibt es in die Kommentare!

Nachtrag: Hier eine weitere Methode, eine Progress Bar zu erstellen.

35 Kommentare

  1. Danke für den tollen Code und die Erklärungen dazu - das war genau das, was ich immer gesucht habe! Da passt alles. Danke, danke, danke! Gleich mal eingebunden in meinen Blog. Ging super gut! :)

    Dir noch einen schönen Sonntag,
    Liebe Grüße
    Lisa

    AntwortenLöschen
  2. Hallo Sandra,

    klasse, danach habe ich schon länger gesucht! Danke, werde ich nachher mal testen.

    Liebe Grüße,
    Fraencis

    AntwortenLöschen
  3. Oh ich weiß, das hatte ich auch lange Zeit. Haha das war immer was, wenn ich mich mal wieder vertippt hatte und Tante Sandra zur Hilfe eilen musste :D
    Inzwischen habe ich das Lovelybooks Gadget in meine Sidebar eingefügt, das ist für mich einfach viel praktischer. Ich aktualisier meinen Lesefortschritt sowieso immer auf Lovelybooks und bin eigentlich ganz aktiv auf der Seite. Da kann ich auch mehrere Bücher untereinander und Kommentare und Bewertungen einfügen UND ich kann nichts kaputt machen heheheheh :D

    AntwortenLöschen
    Antworten
    1. In diesem Sinne bist du echt nicht begabt :'D
      Oh ja, ich find das sieht eigentlich sehr schön aus! Ich glaub das kann man sogar farblich an seinen Blog anpassen, oder? Für einige sicher die praktischere Lösung :)

      Löschen
  4. Klasse. Meine Freundin will einen Buchblog starten und ich mach ihr den Blog soweit fertig. Kann ich sehr gut gebrauchen. Danke

    AntwortenLöschen
  5. Das tutorial ist schon klasse. Überlege manchmal auch sowas einzubauen, aber irgendwie müsste ich dann immer den Umweg über den Browser/Blogger machen, was unterwegs echt umständlich ist :/ Ich würde wahrscheinlich eher das von Goodreads einbauen, aber deins sieht viel schöner aus :)

    Übrigens hab ich dich bei Goodreads geadded, hoffe das war okay.

    Liebe Grüße.

    AntwortenLöschen
    Antworten
    1. Das Blöde ist ja auch, dass man das hier immer selbst updaten muss - via Goodreads (oder Lovelybooks) geht das mit dem Aktualisieren automatisch, das ist schon praktisch und schaut auch gar nicht schlecht aus finde ich! Klaro :D

      Löschen
  6. Das ist mal ein wirklich cooles Tutorial :)

    Liebe Grüße

    http://nilooorac.blogspot.de

    AntwortenLöschen
  7. Über dieses Tuturial bin ich damals auf deinem Blog gelandet :D

    AntwortenLöschen
    Antworten
    1. Ich glaub so ging es einigen :) Danke fürs Dableiben ^.^

      Löschen
  8. Huhu!

    Ich bin jetzt bei dir über Janas Blog "Welt der Bücher" gelandet. Sie hat dich unter den Top Ten ihrer liebsten Bogs genannt und ich bin auch total begeistert von deiner Seite! Hast gleich eine Followerin dazu gewonnen ;)

    Der Beitrag über den Lesefortschritt ist auch toll und super erklärt! Ich überleg auch schon länger, das einzubinden - mal schauen :)

    Liebste Grüße, Aleshanee
    Weltenwanderer

    AntwortenLöschen
    Antworten
    1. Oh wie schön dass du mir das sagst, ich find das immer sehr interessant wie Leute eigentlich auf meinen Blog stoßen! :) Vielen Dank, das ist lieb von dir!

      Löschen
  9. Ein sehr hilfreiches Gadget für Blogs, die regelmäßig Buchvorstellungen betreiben. :D
    Toll, das du es zur Verfügung stellst!

    xoxo
    Selly
    von SellysSecrets

    AntwortenLöschen
  10. Ich wollte dir an dieser Stelle nur kurz mitteilen, wie hilfreich deine HTML-Tutorials sind! Vielen lieben Dank für die Mühe, die du dir damit machst! Dank dir hab ich ja auch so ein hübsches Rezensionsverzeichnis ;) Vielleicht überarbeite ich mal bei Zeit und Muße mein "Currently Reading" aber ich glaube es wird mir zu aufwändig sein, immer den Fortschritt festzuhalten.

    Liebe Grüße,
    Tina

    AntwortenLöschen
    Antworten
    1. Wie lieb Tina, vielen vielen Dank! Ich selbst beschäftige mich ja auch mehr oder weniger mit dem Thema in meiner Freizeit (manchmal mehr als mit Büchern - tritt alles so phasenweise auf, haha), deshalb macht es auch immer sehr Spaß, Posts dazu zu schreiben. Diese Sparte sollte ich auf meinem Blog vielleicht mal mehr ausbauen. ^^

      Löschen
  11. Ich liebe ja deine Tutorials, gerade ich als absoluter Neuling was bloggen angeht. Aber irgendwie bekomme ich das mit dem Balken nicht hin, bei mir werden immer beide untereinandere angezeigt :( selbst wenn ich es unverändert bei mir rein kopiere. Vielleicht hast du ja eine Idee?

    Liebste Grüße ;)

    AntwortenLöschen
    Antworten
    1. Das ist mir auch schon oft passiert, geschieht bei mir immer wenn ich von dem HTML-Text in den Rich-Text (so, wie der Code dann angezeigt werden soll) schalte. Total ärgerlich. Füg mal einfach den Code in das Widget ein und klick sofort auf speichern. ^.^

      Löschen
  12. Danke, wenn ich Zeit habe, werde ich mich mal.ransetzen :)) echt klasse.beschrieben und funktioniert. Dein Blog iet wirklich supi ♥

    AntwortenLöschen
  13. Hallo Sandra sehr gutes Teil, habe es bei mir eingebaut, mit zwei Büchern. Schaut gut aus. Habe mich noch etwas bei dir umgeschaut, folge dir und habe dich auf meinem Blog eingebunden.
    LG
    Uli
    Https://leserwelt.wordpress.com

    AntwortenLöschen
    Antworten
    1. Danke sowohl für das Lob als auch für das Einbinden :)

      Löschen
  14. Habe es eingebunden, aber wie macht man den Lesebalken sichtbar???
    Glg Sophie
    xxhoneystories.blogspot.com

    AntwortenLöschen
    Antworten
    1. ändere mal die Farbe des ersten Balkens. Die hier angegebenen sind unterscheiden sich schwach. Schau mal auf meine Seite. LG Uli
      Https://leserwelt.wordpress.com

      Löschen
    2. Hallo Sophie, ich hab in deinem Quellcode nachgeschaut und das Widget selbst in einen HTML-Editor eingebunden, da ist auch kein Balken definiert. Manchmal spinnen die Widgets von Blogspot ganz schön sodass Codes zusammengehauen/verändert wären. Ich würde sagen, mach den Code nochmal neu und speichere ihn dir dann irgendwo am Desktop, falls dir nochmal sowas passiert! :)

      Löschen
  15. Huhu liebe Sandra! :)

    Ich komm hier nochmal schnell vorbei um dir zu sagen, dass ich dich getaggt habe. :)
    http://book-blossom.blogspot.co.at/2015/02/be-my-valentine.html#comment-form

    Liebste Grüße
    Nina

    AntwortenLöschen
  16. Huhu

    Bin gerade über deinen Blog gestolpert...
    Gefällt mir total und ich bin direkt als Leserin geblieben :)

    Viel Spaß beim Lesen und Bloggen

    Viele Liebe Grüße
    Nicky (the-infinite-bookshelf.blogspot.de)

    AntwortenLöschen
  17. Huhu,
    vielen lieben Dank dir!! Habs direkt einbiden können, ohne Probleme :)
    Liebe Grüße, Natalie

    AntwortenLöschen
  18. Hallo ;)

    Ich bin noch nicht so lange in der Bloggerwelt unterwegs, so weiss ich nicht genau wo ich dies einfügen soll... tut mir echt leid. Es liegt nicht an dir, sondern bei meinem Umgang mit dem Computer.. :o
    Ich würde mich freuen, wenn du mir es vielleicht noch einmal erklären könntest...

    Mit freundlichen Grüssen
    Lesleys Bücherwelt

    AntwortenLöschen
    Antworten
    1. Hey, diese Lesefortschrittsanzeige ist für die Sidebar gedacht - das ist hier auf meinem Blog zB der schmälere Streifen rechts neben dem Bereich, wo die normalen Posts zu lesen sind. In der Sidebar habe ich ein kleines Menü, meine aktuelle Lektüre & Lesefortschritt, Blogs, die ich gerne lese etc.

      Du gehst also von deinem Bloggerdashboard aus auf den Unterpunkt "Layout". Oben siehst du Elemente wie dein Favicon (das kleine Bildchen oben im Browser-Tab) und deinen Header, danach teilt sich die Seite auf in zwei Spalten: links ist Platz für die Blogposts und rechts ist eben die Sidebar. Dort klickst du auf "Gadget hinzufügen", dann auf HTML/JavaScript und dort fügst du nun den im Text beschriebenen Code ein. Wenn du fertig bist klickst du auf Speichern. Dann kannst du das Gadget mit Mausklicken in die Position verschieben, in der du den Lesefortschritt in deiner Sidebar haben möchtest. Dann wieder "Layout speichern" (weil du ja noch was verschoben) hast und angucken.

      Wenn du noch Fragen hast, mein Kommentarfeld hat 24/7 geöffnet :D

      Löschen
  19. Hallo!
    leider sagt er bei mir der code würde unzulässige Zeichen enthalten kannst du mir helfen?

    AntwortenLöschen
    Antworten
    1. Hast du sicher nur den Code von <center> bis </center> kopiert und hast ihn in das Gadget eingefügt? Benutzt du ein Template, das nicht direkt von Blogspot bereitgestellt wird? Lösche vielleicht die // raus.

      Löschen
  20. Hey, total klasse! Kann man auch etwas einfügen, dass man bei einem Klick auf das Bild auf einer Seite landet?

    LG, Mary <3
    http://marys-buecherwelten.blogspot.de/

    AntwortenLöschen
    Antworten
    1. Hallo Mary,

      Klar geht das! Füge einfach das Fette so wie hier ein (statt meiner Blogadresse natürlich die gewünschte URL):

      <a href="http://pusteblumeasdf.blogspot.co.at">
      <img src="Bild-URL des Covers"
      alt="Titel des Buches"
      title="Titel // Autor"
      style="width: 170px;" />
      </a>

      Löschen
    2. Daaaaaaaaaaaaaaaaaaaanke ♥♥♥

      LG, Mary <3

      Löschen
  21. Danke für dieses tolle Tutorial, auch wenn es schon eine Weile her ist. :-)
    Ich verwende es jetzt für eine kleine Challenge mit mir selbst.

    Ganz liebe Grüße
    Lisa
    traeumenvonbuechern.blogspot.de

    AntwortenLöschen
  22. Hi Sandra, ^^

    Super tolles Tutorial!

    Lg Flüsternde Worte

    AntwortenLö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