[Blogger Hilfe] Lesefortschrittsanzeige

Hey, 

weil ich selber gerne ein bisschen mit HTML/CSS rumbastel und ich schon ein paarmal gefragt wurde, wie ich bestimmte Elemente auf meinem Blog "designt" habe, möchte ich gerne eine kleine Reihe starten, nämlich die Blogger Hilfe. In unregelmäßigen Abständen will ich gerne kleine Tutorials schreiben, die den einen oder anderen von euch vielleicht interessieren könnten.


Lesefortschrittsanzeige

Ok, also das erste kleine Tutorial beschäftigt sich mit meinem Seitenleistengadget "ICH LESE" bzw. mit der Lesefortschrittsanzeige. Ich hoffe, dass es einigermaßen verständlich ist, wenn nicht, könnt ihr euch gerne melden.

Und so sieht das bei mir aus: oben seht ihr das Buchcover, darunter eine Leiste mit dem Lesefortschritt als Balken. Außerdem werden die gelesenen Seiten, gesamte Seiten und der Prozentsatz angezeigt. Im Voraus möchte ich schonmal sagen, dass sich das ganze leider nicht vollautomatisch aktualisiert, sondern immer mal wieder ein bisschen Handarbeit gefragt ist.



1. Zuerst erstellt ihr unter "Layout" ein neues HTML/CSS Gadget und schiebt es an die gewünschte Stelle.

2. In dieses Gadget schreibt ihr dann diesen bzw. einen ähnlichen, angepassten Code:

<center><img src="LINK1" title="Autor - Buchtitel" style="width:150px; border-radius:5px" /><br/>


<div style="text-align:left; width: 150px; height: 15px; background: none repeat scroll 0% 0% rgb(187,187,187); border: none; border-radius:5px"><div style="width:39.3%; height: 15px; background: none repeat scroll 0% 0% rgb(255,34,34); font-size: 8px; line-height: 8px; border-top-left-radius:5px; border-bottom-left-radius:5px;">
</div></div>176 / 448 Seiten. 39.3 %!<br />
<br />


</center>


Der Code ist sicherlich nicht perfekt, aber hey, hauptsache, es funktioniert.  Ich werde euch das jetzt Schritt für Schritt erklären.

Also, erstmal der Rahmen: das gelbe <center> ... </center> ist dafür da, dass sowohl das Bild, als auch der Balken mittig ausgerichtet ist. Wenn ihr das nicht wollt, könnt ihr diese beiden Klammern einfach weglassen.

Als nächstes kommt dann euer Bild. img src="LINK1" -> hier kommt eure Bild-Adresse rein, anstatt LINK1. Wenn ihr also irgendwo auf eurem Blog schon ein Bild habt oder eines, das irgendwo hochgeladen ist, könnt ihr mit Rechtsklick "Grafikadresse kopieren". Diese Adresse kommt dann zwischen die beiden Anführungszeichen.

Mit title="Autor - Buchtitel" könnt ihr einen Text anzeigen lassen, der erscheint, wenn ihr mit der Maus über das Bild fahrt. Ihr könnt zwischen "" z.B. den Autor und den Buchtitel schreiben. Wenn ihr keinen Text haben wollt, löscht diesen Teil einfach.

Danach kommen noch zwei Design-Geschichten, nämlich style="width:150px; border-radius:5px". width:150px legt fest, wie breit das Bild ist. Diesen Wert könnt ihr im Prinzip variieren wir ihr wollt, so dass es eben zu eurer Sidebar passt. Mir border-radius:5px gestalte ich das Bild mit runden Kanten. Kann man auch weglassen, dann sind die Ecken kantig. Das anschließende <br/> bedeutet einen Zeilenumbruch, die Fortschrittsanzeige kommt dann also definitv erst unter dem Bild, und nicht versehentlich daneben.


Der kompliziert aussehende Part danach ist für die Lesefortschrittsleiste zuständig.

text-align:left; width: 150px; height: 15px. Das text-align:left ist zuständig für die Ausrichtung, der farbige Balken ist also links. Mit width und height legt man die Breite bzw. Höhe der Leiste fest. Ich habe sie bei mir genauso breit gemacht wie das Bild, also 150px.

background: none repeat scroll 0% 0% rgb(187,187,187): hiermit beschreibt ihr den Hintergrund.  Dieses none repeat scroll kann ich gar nicht so genau erklären, aber im Prinzip wird damit alles auf Standard gesetzt, was man nicht selber definiert. Wichtig ist hier aber auf jeden Fall die Farbe, rgb(187,187,187) ist so ein helles grau, aber im Prinzip könnt ihr jede beliebige Farbe wählen. Wenn ihr mal nach rgb oder hex-Farben googled, findet ihr etliche Tabellen, wo ihr euch dann Farben raussuchen könnt.

border: none; border-radius:5px legt euren Rahmen/Rand fest. Meine Leiste hat keinen (farbigen) Rand, deswegen steht hier noe. border-radius:5px gestaltet runde Kanten.

 
Als nächstes kommt der eigentlich wichtige Teil, nämlich der farbige Balken, der den Fortschritt anzeigt. width:39.3%; height: 15px; Mit height wird wieder die Höhe festgelegt, die natürlich genauso groß sein sollte, wie der graue Hintergrund. width ist des etwas umständliche Teil, denn den müsst ihr immer wieder manuell anpassen. Prozentual zur gesamten Breite könnt ihr die Breite des farbigen Balkens angeben. Bei einer Lesefortschrittsanzeige berechnet sie sich durch die Formel (gelesene Seiten*100)/gesamte Seiten. Ich aktualisiere meinen Fortschritt ca. einmal am Tag, den Aufwand kann ich verkraften.

Danach kommen nur noch weitere Definitionen fürs Aussehen: background: none repeat scroll 0% 0% rgb(255,34,34); font-size: 8px; line-height: 8px; border-top-left-radius:5px; border-bottom-left-radius:5px. rgb haben wir ja bereits kennengelernt, hier könnt ihr die Farbe einstellen, bei mir ein Rotton. Font-size und line-heigt haben bei mir jetzt auch überhaupt keinen Einfluss, ich hab in meinem Code offensichtlich noch ein paar nutzlose Fetzen stehengelassen.. Damit könnte man die Schriftgröße und die Zeilenhöhe einstellen. Danach kommt, dass die Kanten an der linken Seite abgerundet werden, weil ich den Hintergrund und eigentlich die meisten Bilder abgerundet habe.

So und nun zum Schluss noch der Text: 176 / 448 Seiten. 39.3 %!. Hier trage ich immer manuell meine gelesenen und die gesamten Seiten ein, außerdem den Prozentsatz, den ich ja vorher schonmal berechnet habe. Das wird dann genau so angezeigt.


_________________________________________________________________________________________


Puh, also das ist jetzt ganz schön ausführlich geworden. Wer sich ein bisschen mit HTML auskennt, dem werden ja aber eh viele Sachen schon bekannt vorkommen, denn kompliziert ist es eigentlich nicht.


ich hab auch noch ein zweites Design-Beispiel. Hier habe ich einen grünen Balken gewählt und weder die Fortschrittsanzeige noch das Bild sind abgerundet. Im Code habe ich außerdem statt rgb-Farben Hex-Codes benutzt. Alles ist insgesamt ein wenig größer.



<center>

<img src="LINK1" title="Dan Simmons - Terror" style="width:200px;" /><br/>

<div style="text-align:left; width: 200px; height: 18px; background: none repeat scroll 0% 0% #E0E0E0;"><div style="width:50.0%; height: 18px; background: none repeat scroll 0% 0% #3CB371;">
</div></div>

224 / 448 Seiten. 50.0%!<br />

<br /> </center>


Kommentare:

  1. Eine schöne und verständliche Anleitung, die ich sicher bald mal ausprobieren werde :)
    Danke für die Mühe :)

    LG,
    Steffi

    AntwortenLöschen
    Antworten
    1. Und auch wenn es gerade nicht zum Thema passt, ich war einfach mal so frech, dich zu taggen:

      http://somayas-buecherwelt.blogspot.de/2013/12/tag-excellent-blog-award.html

      Löschen
  2. Hey echt klasse deine Blogger Hilfe.
    Da schau ich doch liebend gerne rein und hol mir die ein oder andere Anregung. Der Lesefortschritt is eins davon... werde das am WE gleich mal ausprobieren.
    Dangö liebe Lisa ;)

    Lg Sassi :)

    AntwortenLöschen
  3. Das ist ja klasse, ich habe mich schon öfters gefragt wie das geht und hab daher immer auf goodreads zurück gegriffen.

    Du erklärst das wirklich gut und ich werde das bald ausprobieren, danke! :)

    LG Sarah

    AntwortenLöschen
  4. Echt vielen, vielen Dank :) Es hat super funktioniert bei mir :))

    AntwortenLöschen
  5. Ahhh so fein von dir, danke!

    Ich hab das schon mal selber probiert, aber es hat mal so rein gar nicht funktioniert^^

    AntwortenLöschen
    Antworten
    1. viel Spaß beim ausprobieren und rumbasteln ;)

      Löschen
  6. Aloha,

    wir haben deinen Beitrag auf unserer Facebookseite "blogARTig" verlinkt. Solltest du etwas dagegen haben, bitte laut schreien.

    Liebste Grüße
    blogARTig

    AntwortenLöschen
  7. klasse ☺ genau, was ich gesucht habe
    Vielen Dank ☺

    AntwortenLöschen
  8. Ich war mal so frei und hab es auch bei mir eingebaut, vielen Dank für das Zur Verfügung stellen!
    LG Petra

    AntwortenLöschen
  9. Cool, habe mich schon immer gefragt wie das funktioniert =) Lieb dass du dein Wissen hier teilst!!

    LG

    AntwortenLöschen
  10. Danke für diese ausführliche Beschreibung. Hat geklappt. :-)

    AntwortenLöschen
  11. Wundervoll, gleich mal eingebaut, vielen Dank :) glg Franzi

    AntwortenLöschen
  12. Eine ganz tolle Idee, hier auch Tutorials anzubieten! Dein Blog gefällt mir auch richtig gut, ich schau mich noch ein bisschen hier um und lass dir auch gleich ein Abo da. :-)

    AntwortenLöschen
  13. Vielen lieben Dank für dein Tutorial, hat mir wirklich sehr weitergeholfen :)

    AntwortenLöschen
  14. Tolles Tutorial. Ich habe da mal eine Frage, ich würde das gerne so haben wollen, dass wenn man auf das Bild klickt au die Verlagsseite des Buches kommt, also einen Link mit einbauen, hast du da vielleicht eine Idee, ich bin nicht wirklich mit HTML vertraut. :D

    Liebe Grüße,
    Nico

    AntwortenLöschen
    Antworten
    1. Schau mal hier rein, da steht das mit dem Link erklärt: http://wort-gewalt.blogspot.de/2014/02/blogger-hilfe-rezensionsubersicht.html

      kanns dir leider nicht hier in den Kommentar schreiben, der Code wird dann direkt umgewandelt ;) Schüsselwort dass du für den Link brauchst ist <a href="..

      Löschen
  15. Hallöchen,

    eine sehr tolle Sache und vielen Dank für das Tutorial.
    Wäre nie auf die Idee gekommen, so meinen Lesefortschritt anzuzeigen. Die Idee gefällt mir echt super.

    Liebe Grüße,
    Abigail

    AntwortenLöschen
  16. Vielen Dank für die tolle und einfache Anleitung.

    AntwortenLöschen

Kommentare sind erwünscht! :) aber bitte freundlich bleiben