• Startseite
  • Projekt SUB 2023
  • Media Kit
  • Datenschutz
  • Impressum

Miss Foxy Reads

Literatur, Lifestyle, Filme & Serien

  • Home
  • Literatur
    • Kolumnen
    • Empfehlungen
    • Tags
    • Events
    • Comics
    • Interviews
    • Aktionen
  • Rezensionen
    • Übersicht
    • Book Talks
    • Comics
  • Potterheads
    • Literatur
    • Film
  • Filme & Serien
    • Events
    • Aktionen
    • Kritik
    • Nerd Talk
    • Tags
    • Marvel
  • Lifestyle
    • Gedanken
    • Studium
  • Blogroll

Allgemein · 13. Dezember 2014

Tutorial | Lesestatus-Anzeige für den Blog

Huhu ihr Lieben,

heute bin ich dran und darf euch in unserem Adventskalender den Tag versüßen. Eigentlich hatte ich ein paar süße Ideen zum Verschönern von euren Weihnachtsgeschenken geplant aber das Wetter spielt leider nicht mit bezüglich ein paar schönen Fotos und die Uni hat mir auch keine Zeit dafür gelassen.

Da ich aber so oft nach meiner Lesestatus-Anzeige gefragt werde, dachte ich mir, dass ich euch erkläre, wie ihr die für euch persönlich anpassen könnt.

<center>

<img src=”Bild URL” title=”Buchtitel”   style=”width:200px; border-radius:5px;” /><br/>

<div style=”text-align:left; width: 200px; height: 20px; background: none repeat scroll 0% 0% rgb(135,206,255); border: none; border-radius:5px;”>

<div style=”width:33.0%; height: 20px; background: none repeat scroll 0% 0% rgb(74,112,139); font-size: 8px; line-height: 8px; border-top-left-radius:5px; border-bottom-left-radius:5px;”>

</div>
</div> 120 / 384 Seiten<br />
<br />

</center>

Ich werde euch nun einige Ausdrücke erklären. Die, die mit rot geschrieben sind, müsst ihr anpassen, wenn ihr das Gadget zum ersten Mal installieren wollt bzw. etwas am Design ändern wollt. Die farbig markierten Teile sind die, die ihr dann später pro Buch bzw. pro Lesestatus-Update immer aktualisieren müsst.

<center> und </center>: Alles, was zwischen den beiden Ausdrücken ist, wird zentriert dargestellt. Möchtet ihr euren Lesestatus lieber linksbündig haben, löscht ihr diese beiden Ausdrücke einfach.

width: 200px;: Diesen Ausdruck findet ihr im gesamten Text genau zwei mal. Width beschreibt die Breite des abgebildeten Dings (also einmal oben das Bild und dann unten die Leiste). Hier solltet ihr die Breite eurer Siedebar in Pixeln(px) angeben. oder ihr macht ca. 5-10px weniger, je nachdem, was ihr schöner findet.

borderradius: 5px;: Diesen Ausdruck findet ihr auch wieder beim Bild und in der ersten Klammer sowie unten noch mal leicht abgeändert bei border-top-left-radius und border-top-right-radius. Dieser ausdruck rundet die Ecken eures Bildes ab. Möchtet ihr das nicht, gebt ihr 0px ein. Möchtet ihr ein wenig gerundetere Ecken, gebt einfach eine höhere Zahl ein (Tipp: bei 100px wäre das Bild ein kreis. Also probiert einfach ein bisschen aus.)

height: 20px;: Height beschreibt die Höhe des Balkens unten. Ich habe für meinen Balken 20px gewählt. Auch hier könnt ihr ausprobieren, wie breit ihr euren Balken haben wollt. Ihr findet im Text zwei mal diesen Ausdruck. Hier muss immer die selbe Höhe stehen.

rgb(xxx, yyy, zzz): Den RGB-Ausdruck findet ihr auch zwei mal. Einmal pro Klammer. Der RGB-Ausdruck in der ersten Klammer beschreibt die Hintergrundfarbe des Balkens, die zweite Klammer die Farbe der Fortschrittsanzeige. Eine tolle Übersicht mit vielen Farben und passenden RGB-Codes findet ihr hier.

Damit habt ihr ein tolles Grundgerüst für euren Lesestatus. Kommen wir nun zu den Dingen, die farbig markiert sind und häufiger aktualisiert werden müssen. Ich mache das, sofern es geht, immer, wenn ich auf Blogger bin.

Bild URL: Hier fügt ihr einen gültigen URL-Pfad zu einem Bild ein. Ich benutze am liebsten die Bilder vom Verlag oder von Lovelybooks, da sie eine gute Auflösung haben.

Buchtitel: Hier gebt ihr den Buchtitel ein. Wenn eure Leser nun mit der Maus über das Bild fahren erscheint er.

33.0%: Hier wird es ein bisschen kompliziert, Aber nur ein bisschen. Die Prozentzahl beschreibt, wie weit ihr mit dem Buch seid und passt so eure Leiste an. Die Prozentzahl könnt ihr ganz genau mit Dreisatz ermitteln oder ihr macht es wie ich im Beispiel und gebt den Wert ungefähr an.

120 / 384 Seiten: Das hier ist eine reine Textzeile. Hier könnt ihr was auch immer eingeben. Ich habe mich dazu entschieden x / y Seiten zu nehmen. Bei Hörbüchern ändere ich das ganz einfach in x / y Minuten ab. Hier könnt ihr aber auch eure Prozentzahl hinschreiben oder beides kombinieren. Wenn ihr dort überhaupt nichts stehen haben wollt, dann löscht ihr den Text einfach.

Et voila! Fertig ist euer Lesestatus. Ich hoffe, euch hat das Tutorial gefallen und zugesagt. Falls ihr noch Fragen habt, kontaktiert mich gerne per Kommentar oder Mail. ♥

Posted In: Allgemein

You’ll Also Love

Augenblicke | Die Gewinner
[Rezension] Die letzten Tage von Rabbit Hayes – Anna McPartlin | Hörbuch
[Bloggeraktion + Gewinnspiel] Road to Hallelujah – Martina Riemer – ED SHEERAN MÄDELS!!!

Kommentare

  1. Sweet Scent Stories meint

    15. Dezember 2014 um 20:20

    Hey =)

    Ich finde dein Tutorial mal eine super Abwechslung und werde es, sobald ich Zeit habe gleich mal an meinem eigenen Blog ausprobieren =)

    Eine schöne restliche Adventszeit und liebe Grüße,

    Natalie 😉

    Antworten
  2. Stella S. meint

    26. Dezember 2014 um 16:09

    Vielen vielen Dank für dein tolles Tutorial. Ich wollte schon so lange wissen wie man das macht. Nun kann man auch auf meinem Blog meinen Lesevortschritt verfolgen.
    Nochmals vielen Dank

    Antworten
  3. Aleshanee Tawariell meint

    25. Juli 2015 um 7:06

    Vielen Dank! Das klappt wunderbar 🙂
    Und zum Glück wars sogar gleich die richtige Farbe für meinen Blog *g*

    Liebste Grüße, Aleshanee

    Antworten
  4. books and art meint

    25. Juli 2015 um 9:20

    Danke!!! Hab es mit deiner Hilfe endlich hinbekommen 😀 <3

    Viele Grüße

    books-and-art

    Antworten
  5. Nadine Paque-Wolkow meint

    17. November 2016 um 13:05

    Hallo

    vielen Dank für das Tutorial … mein Blog sieht jetzt viel cooler aus XD

    lg
    Nadine

    Antworten
  6. Jasmin Ding meint

    28. August 2017 um 17:30

    DANKE DANKE DANKE!!!!!
    War am Anfang etwas schwer zu beabeiten aber es hat endlich funktionirt.
    Deine erklaerung war super!!!
    https://jasminsdbuecherliebe.blogspot.de/

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Next Post >

[Rezension] Zwillingssterne – Cristina Moracho

Miss Foxy Reads on Social Media

Finde mich auf den Leseportalen Goodreads und Lovelybooks

Per Mail folgen

Blog Archive

Trage dich in den Newsletter ein.

* Feld erforderlich

Most Popular

  • Vier Bücher mit starken weiblichen Charakteren
  • Mehrere Bücher gleichzeitig lesen
  • Rezension | Exit: Das Buch – Der Jahrmarkt der Angst
  • Fünf Gründe, wieso ihr Bright Sun – Dark Shadows lesen solltet | Anzeige

#19für2019 – Meine Leseliste

01) King of Scars
02) Legendary
03) Mortal Engines
04) Der Insasse
05) Ein wirklich erstaunliches Ding
06) Heliopolis
07) Palace of Silk
08) Redwood Love
09) Dear Martin
10) Language of Thornes

______

lese ich gerade
schon gelesen

* Freiwillig benutzte Affiliate Links. Wenn du etwas über den Link kaufst, bekomme ich dafür eine Provision. Das ändert jedoch nichts am Kaufpreis für dich. Vielen Dank für deine Unterstützung.

Trending now

  • Vier Bücher mit starken weiblichen Charakteren
  • Mehrere Bücher gleichzeitig lesen
  • Rezension | Exit: Das Buch – Der Jahrmarkt der Angst
  • Fünf Gründe, wieso ihr Bright Sun – Dark Shadows lesen solltet | Anzeige

hey there!

Ich bin Jule, literaturverliebt und ein echter Nerd. Mein Blog ist mein persönliches Lesetagebuch. Hier findest du also alles über die Bücher, die ich gelesen habe, Filme, Serien, anderes Nerdzeug und vieles mehr. Ich freue mich, dass du hier hergefunden hast. Viel Spaß beim Stöbern!

BOOKS

  • Rezensionen
  • Book Talk
  • Empfehlungen
  • Interviews

FANDOMS

  • Marvel
  • Potterheads
  • Gaming
  • Comics

WORK WITH ME

  • Media Kit und Kooperationen
  • Datenschutz
  • Impressum

KATEGORIEN

  • Literatur
  • Filme & Serien
  • Lifestyle
  • Datenschutz
  • Impressum
  • Datenzugriffsanfrage
  • Linkliste
  • Lade deinen kostenlosen Hashtag-Guide herunter
  • Noch ein letzter Schritt…

Copyright © 2023 Miss Foxy Reads · Theme by 17th Avenue