Voortgangsbalk reading challenge voor op website

Gepubliceerd op 13 oktober 2026 om 14:47
Stapel boeken.

Veel lezers klagen over dat ze het gevoel hebben dat hun reading challenge op diverse sites niet klopt. Iets wat ikzelf maar al te goed herken. Dat ligt niet aan de lezer, maar aan het feit men of boeken niet accepteert die geen ISBN-nummer hebben, of er is een andere reden waarom ze boeken niet accepteren. Jij als lezer kijkt daar niet naar, je wilt gewoon je boeken lezen en in de reading challenge laten zien dat je een boek hebt gelezen, laten zien hoe ver je bent.

Ik heb een hele simpele voortgangsbalk voor de reading challenge. Kijk maar op de pagina Reading Challenge 2026. Zelf heb ik onder de voortgangsbalk kolommen geplaatst met o.a. maanden en daarachter het aantal boeken dat ik die maand heb gelezen, auteurs en uitgevers die ik heb gelezen, het aantal pagina's en waarderingen en daar weer onder een soort visitekaartjes van de boeken die ik tot nu toe dit jaar heb gelezen.

Mocht je nu een boekenblog hebben en ook zo'n voortgangsbalk willen, dan kun je de volgende html-code gebruiken:

 

<div style="width: 100%; background-color: #eee; border-radius: 5px;">

  <div style="width: 60%; background-color: #b22222; height: 25px; border-radius: 5px; text-align: center; color: white;">

    12 / 20 boeken

  </div>

</div>

 

Je kunt de volgende codes aanpassen:

12 / 20 boeken, 20 verander je in het aantal boeken dat je dat jaar wilt lezen en 12 verander je in het aantal boeken dat je hebt gelezen dat jaar.

border-radius: 5px, width: 100%, width: 60% en height: 25px, de getallen kun je veranderen, je moet zelf even opslaan en kijken wat jij het mooiste vindt op jouw site. 

#eee en #b22222, op HTML Color Codes kun je kleuren kiezen en de codes kopiëren en plakken in html-code, maar je kunt ook ColorZilla op je computer installeren en de kleuren van jouw site kiezen met het pipet en de code kopiëren en plakken in de html-code. 

color: white, white kun je veranderen in een andere kleurnaam. Op PHPFreakz kun je de namen van de kleuren vinden die je kunt gebruiken.

Ik wens jullie veel plezier met de voortgangsbalk.

P.s.: Mocht je deze voortgangsbalk ook voor iets anders willen gebruiken, zoals bijvoorbeeld het aantal kleurplaten dat je jaarlijks wilt inkleuren of voor het aantal glazen water dat je per dag wilt drinken, ik noem maar wat, dan maak je van boeken een ander woord, bijvoorbeeld kleurplaten, glazen water of iets anders. Je kunt er alle kanten mee op. 

P.s. 2: Je zult de voortgangsbalk steeds handmatig moeten aanpassen aan het aantal boeken dat je gelezen hebt, of iets anders, dat gaat helaas niet automatisch zoals je misschien al begrepen hebt.  😉

Reactie plaatsen

Reacties

Er zijn geen reacties geplaatst.