{Tutorial} Lesestatus Gadget

Heihei, ihr Lieben!
Momentan sind Prüfungen angesagt... Zum Lesen komme ich trotzdem eigentlich gut, bin gerade am zehnten Buch dieses Monats, aber das ziiiiieeht sich und ich komme nicht wirklich voran...
Ich habe auch schon einige Rezensionen für euch vorbereitet, die Stelle ich dann in der richtigen Prüfungszeit rein, da, wenn ich wirklich gar nicht zum Bloggen komme, damit ihr nicht so alleine dasteht... mittlerweile sind wir bei 58 Followern angekommen, da uns über Bloglovin 10 liebe Menschlein folgen. Danke euch! :)
Wie gesagt, mein Buch zieht sich, und die Rezensionen spare ich, was soll dann hier laufen?
Ausserdem habe ich ein Buchkaufverbot, und da könnte man meinen, das nichts läuft, aber allein heute sind drei Bücher im Briefkasten gelegen... Mehr dazu erfährt ihr in einem Neuzugängepost gegen Ende des Monats - ich sage nur: Danke, Verlage, dass ihr mich für Lesehunger rettet mit euren tollen Rezensionsexemplaren, danke, Bloggerinnen und Autoren, die am 23. April ein Gewinnspiel starteten, Danke euch allen! Es ist wirklich schwer, aber ich halte es tapfer durch...!
Aber dieses Mal geht es nämlich wirklich um was anderes, und wie ihr im Post Titel ahnen könnt, schauen wir uns mal ein bisschen die verrückte Welt von HTML & Co. an, damit ihr alle so eine tolle Leseleiste haben könnt! :) Ich wünsche euch viel  Spass!

Okay, was ist so ein LESESTATUS GADGET überhaupt? Man sieht es zum Beispiel bei uns in der Sidebar unter 'Mara liest'. Ein Foto von einem Buch und darunter einen Balken, in  dem schön angegeben ist, wo ich mich gerade in Prozentzahlen befinde. Ist doch süss, nicht? Wenn ihr nicht jeden Tag ein Buch  verschlingt, kann man das locker kurz einmal am Tag aktualisieren...
Und man selbst hat auch einen tollen Überblick! Also, ihr wollt wissen, wie das geht, oder?
Wir öffnen dazu ein 'Neues Gadget' → Das findet ihr unter 'Layout' → 'Neues Gadget' → 'HTML & Javascript'.
Und darin kopiert ihr erst mal diesen Code (↓↓↓), den wir nun gemeinsam anpassen können.  Ich versuche, euch das alle so verständlich wie möglich zu erklären, aber schreit, wenn was nicht klappt oder so, ja?
<Center><img src="DEIN LINK ZUM BILD/BUCH, DAS DU GERADE LIEST"
 title="DEIN BUCH // DESSEN AUTORIN*AUTOR" style="width:150px; border-radius:5px" /><br/>
<div style="text-align:left; width: 150px; height: 15px; background: none repeat scroll 0% 0% rgb(255,250,240); border: none; border-radius:5px"><div style="width:50%; height: 15px; background: none repeat scroll 0% 0% rgb(240,128,128); font-size: 8px; line-height: 8px; border-top-left-radius:5px; border-bottom-left-radius:5px;">
 </div></div>100 von 200 Seiten | <b>Ich mag das Buch bis jetzt!</b><br />
 <br />

</Center>
Okay, okay, keinen Grund zur Panik, alles gut! Wir schauen uns das Ganze nun Schritt für Schritt an, und da beginnen wir einfach mal mit dem ersten und letzten Wort → Tag.
<Center> und auch </Center>
Das sind sogenannte 'Tags'. Wenn es einen Schrägstrich hat, ist der Tag abschliessend, hat er keinen Schrägstrich, steht er am Anfang.
Center ist Englisch und bedeutet in der Mitte, im Zentrum. Das Ganze Gadget wird also mittig in der Sidebar sein.
<img src="DEIN LINK ZUM BILD/BUCH, DAS DU GERADE LIEST"
Das hier (<img src=") führt einen Bildlink an, damit man ein Bildchen vom Buch sieht, dass du gerade liest. Füge hier deine Bild URL ein. Die Schlusszeichen darf man nicht vergessen!
title="DEIN BUCH // DESSEN AUTORIN*AUTOR"
Das hier ist der Text, der erscheint, wenn man mit der Maus über das Bild fährt. Ich schreibe da gegebener Weise immer Buchtitel und Autorin rein. Auch hier sind die Anführungs- und Schlusszeichen sehr wichtig!
style="width:150px; border-radius:5px" />
Hier wird das Bild noch ein wenig 'gestylt' (Wieder ein bekanntes Wort im Gewusel: Der Abschnitt wird schön mit dem Oberbegriff 'Style' angeführt!).
Du musst wissen, wie breit deine Sidebar ist, das kannst du anhand eines Tutorials leicht rausfinden. Probier sonst einfach ein bisschen aus!
150 Pixel, darauf ist dieses jetzt eingestellt, und ich habe dem Bild auch noch 'runde Ecken' gemacht.
Das definiert der Teil 'border-raduis:5px'.
<br/>
Dann begegnet uns zum ersten Mal der Teil <br/>. Das steht ganz einfach für 'Zeilenumbruch'. Wie wenn du auf diese Taste rechts drückst, weisst du, was ich meine? Das kommt noch öfters vor, ich hab's immer rot eingefärbt - jetzt wisst ihr, was das ist.
<div style="text-align:left; width: 150px; height: 15px; background: none repeat scroll 0% 0% rgb(255,250,240); border: none; border-radius:5px">
Waaaas? Nein, nein, ruhig bleiben!
Dieser Abschnitt ist für den ersten Balken. Wenn wir uns diesen Lesestatus genau anschauen, besteht er aus zwei Balken, einen, der 'voll' ist, 100%, und ein anderer, der angibt, wo du dich gerade befindest.
Das Ganze ist wieder eine 'Styleangabe', deswegen 'style' vorne.
'text-align_left;' gibt an, dass der Balken links beginnt, was logisch ist. Da er 150 Pixel breit ist, genau wie unser Bild (und gleich nach dem text-align durch 'width: 150px;' angegeben wird), ist er so gross wie die volle Länge, beginnt aber links.
'height: 15px;' Hier kannst du einstellen, wie breit dieser Balken sein soll, also, wie hoch. Wenn du ihn dick willst, musst du die Zahl vergrössern, willst du ihn dünn, verkleinern.
Das waren so Grundlegende Fakten. Wichtig bei denen ist, dass du nach jedem 'Fakt' den Strich-Punkt nicht weglässt!
background: none repeat scroll 0% 0% rgb(255,250,240);
Dieses 'None repeat scroll 0% 0% lässt sich schwer erklären, muss aber ganz sicher dahin! Übernimm es am besten einfach so!
rgb(255,250,240); bezeichnet die Farbe. Ich habe euch eine Farbtabelle rausgesucht, welche ihr HIER findet. Wenn ihr auf den Link klickt, seht ihr verschiedene Tabellen. Links steht immer der Name, in der Mitte drei hunderter Zahlen. Wenn ihr die Farbe eurer Wünsche gefunden habt (für den hinteren Balken!), kopiert ihr diese drei Zahlen in die Klammer rein und löscht '255,250,240' raus. Das habe ich mir ausgesucht und es ist ein helles Rosarot // Beige.
border: None;
steht dafür, dass dieser erste Balken nicht umrandet wird, also keinen 'Border' hat.
border-radius:5px
kennt ihr schon, das ist dafür, dass die Ecken abgerundet werden! :)
<div style="width:50%; height: 15px; background: none repeat scroll 0% 0% rgb(240,128,128); font-size: 8px; line-height: 8px; border-top-left-radius:5px; border-bottom-left-radius:5px;">
Jetzt kommen wir zum zweiten Balken, der, der darüber liegt und genau  anzeigt, wo du dich befindest. Der wird wieder im 'Style' definiert.
Ganz zuerst finden wir die Länge von dem, also, wie weit er über den anderen überlappt.
'width:50%'
Du bist also in der Mitte des Buches. Weil man das ja nicht immer so genau weiss oder im Kopf ausrechnen kann, gibt es eine einfache Formel für die 'Nicht-Mathe-Genies' unter euch. Aktuelle Seitenzahl MAL hundert GETEILT DURCH gesamte Seitenzahl. Und das ist dann euer aktueller Stand in Prozenten, den ihr immer wieder aktualisiert.
'height:15px;'
Jetzt kommt wieder viel ähnliches: Wer sich noch erinnert, 'height' gibt die Höhe unseres Balken an, also, ob er dick oder dünn ist. Der sieht am Besten aus, wenn er genau gleich ist wie der andere, untere Balken.
background: none repeat scroll 0% 0% rgb(240,128,128);
Wieder dieses komische Repeat-Zeugs und die doppelten Null Prozent, die ihr bitte einfach so übernehmt. Und danach die rgb - hey, genau, du HTML-Genie (wenigstens Genie in etwas :P), das definiert die Farbe! Such dir eine weitere aus, auf dem oben verlinkten Link. :) '240,128,128', für das ich mich entschieden habe, ist so ein rot-rosa...
'font-size: 8px;'
Jetzt geht es um die Schrift, genau, den es ist cool, wenn du darunter schreibst, auf welcher Seite du dich gerade befindest, weil man das trotz des Balkens nicht gerade sofort erkennt. Dieses Teilchen definiert die Schriftgrösse, das zweite 'linge-height_ 8px;' ebenfalls.
Jetzt wird mit 'border-top-left-radius:5px; border-bottom-left-radius:5px;' noch der Anfang links (left) abgerundet.
 </div></div>100 von 200 Seiten | <b>Ich mag das Buch bis jetzt!</b>

Und hier noch der Text. Ich schreibe immer, auf welcher Seite von wie vielen ich mich gerade befinde. Danach mache ich so einen Strich von oben nach unten | und schreibe noch etwas darüber, wie ich das Buch finde. Das mache ich dann meistens FETT. Der beginnende Tag <b> und der abschliessende Tag </b> definiert das. Du willst es lieber kursiv? Dann ersetzt du das Klein-b durch ein Klein-i. Wenn du es kursiv und fett bist, beginnst du mit <b> <i> BLABLABLA und schliesst mit </b> </i> ab.
Ich hoffe, ich konnte euch helfen, die verschiedenen Teile erklären und euch ein schönes, personifiziertes Lesestatus-Gadget in die Sidebar zaubern.
Wenn du zum Beispiel keine abgerundeten Ecken möchtest, lässt du das mit den 5 Pixeln weg oder so... Du kannst die Farben ändern, die Höhe und Breite, einen kleinen Aussage Satz über das Buch schreiben und einiges mehr...
Mir hat es Spass gemacht, euch das zu erklären, aber ich hoffe auch wirklich, dass diesen Code jemand nutzt, da es schon ein bisschen Mühe gemacht hat! :))
Zeigt mir doch eure Links // Sidebars, wenn ihr so ein Gadget habt! :D
Nun wünsche ich euch ein wunderschönes Wochenende!
Alles Liebe,
Mara

Kommentare :

  1. Huhu Mara :)

    Wow, nachdem du mir das ganze schon in der Mail erklärt hattest, machst du jetzt auch noch einen Post?
    Das ist ja toll :)
    Ich habe dir ja schon gesagt, dass ich es richtig gut erklärt finde, ich glaube, so langsam blicke ich bei HTML ein bisschen durch ;D
    Hab es sogar geschafft, mir das Gadget ein bisschen abzuwandeln und bin ganz zufrieden mit mir :D
    also, sehr schöner Post und ich hoffe, viele eurer Leser verschönern jetzt ihre Sidebar weiter ;)

    Liebe Grüße
    Kücki ♥

    AntwortenLöschen
    Antworten
    1. Heihei,
      klar, ich dachte, das interessiert vielleicht auch noch andere und es hat mir Spass gemacht. Das erwähnte Buch habe ich ja nun beendet. :D
      Danke, das freut mich! Auf 'copypastelove' und 'bekreatief' gibt es auch so HTML-Basics, da wird einem einiges ganz gut erklärt, vielleicht magst du da ja vorbeischauen :D
      Ich finde es auch toll! Ist dir super gelungen! :DD
      Klar, das hoffe ich auch :D Und ein riesen Danke!

      Alles Liebe,
      Mara :*

      Löschen
  2. Hallihallo liebe Mara :)

    Danke für das tolle Tutorial - ich bin ja ein echter Fail mit HTML, von daher ist es immer nett, wenn Leute mir einfach sagen, wie ich das Zeug machen kann, das ich eventuell unter Umständen möglicherweise vielleicht machen will.

    Ich habe es geschafft! Und meinen Erfolg kannst du hier bewundern :)

    Alles Liebe und ein schönes Wochenende :)

    AntwortenLöschen
    Antworten
    1. AAAAAAAAAAAnna, liebe Anna :)

      Das glaub ich echt nicht! Neee, das kann nicht sein! :D
      Schön, dass es dir gefällt, und, aww, das ist einfach toll geworden! :D
      Kannst stolz sein! :D

      Dir auch! :D

      Alles Liebe,
      Mara

      Löschen
  3. Das ist SO COOL! Ich hab ja selbst eh auch so einen Balken, aber das hier sieht irgendwie besser aus und ich bin grad irgendwie voll begeistert!! :D Die Sommerferien winken <3 und da hab ich bestimmt genug Zeit, mich mal damit auseinanderzusetzen.

    AntwortenLöschen
    Antworten
    1. Hei Sandra :))
      Jaaa, früher habe ich deine Tutorials geliebt und bin jetzt ganz stolz zu sagen, dass ich sowas sogar schon selbst kann und schwerere abändern kann! :D
      Es geht wirklich ganz einfach und schnell und ich freue mich, so einen bei dir zu sehen :)

      Alles Liebe,
      Mara

      Löschen
  4. Hei Mara

    Schon das du es so übersichtlich Machst und die Erklärungen zu den Farbigen Markierungen. Echt Toll. Ich liebe solche ausführlichen Tutorial.
    Eine Frage bei den Rot Markierten ist bei den ersten
    vor den Schrägstrich kein Leerzeichen. Ist das so gewollt ? Weil ja eigentlich alles was rot gleich ist zu mindestens bei den anderen.

    AntwortenLöschen
    Antworten
    1. Liebe Petra,

      genau das versuchte ich zu machen, und da aktuell das Tutorial auch sehr beliebt scheint, werde ich mir noch mehr Tutorials zu süssen Einzelheiten auf Buchblogs einfallen und die so gut und genau wie möglich erklären zu können.
      Der Tag
      meinst du? Das sollte keinen Unterschied machen, aber danke, dass du mich darauf aufmerksam machst, das ist tatsächlich verwirrend. Komischerweise kann ich mir auch nicht erklären, dass es, wenn man auf Blogger einen Post schreibt, nur einen Zeilenabstand macht, wenn man das ganze
      schreibt, also mit Leerzeichen, und sonst kann man das beliebig machen... Ich hoffe, ich konnte dir helfen, aber wenn du den Code so übernimmst, sollte eigentlich alles richtig aussehen ;)

      Alles Liebe,
      Mara

      Löschen
  5. Großartig! Das hab ich schon so lange gesucht und dann so toll erklärt!

    Ganz lieben Dank dafür!!!!

    AntwortenLöschen
    Antworten
    1. Hei JED,

      freut mich, dass ich helfen konnte. Sieht schick aus! ;)

      Löschen
  6. Hallo Mara,
    das ist wirklich genial erklärt! Hoffe es ist ok das ich deinen Beitrag verlinkt habe (falls nicht nur Bescheid sagen, dann nehm ich es selbstverständlich raus)
    http://misshappyreading.blogspot.de/p/blogger-probleme.html
    lg Nadine

    AntwortenLöschen
    Antworten
    1. Liebe Nadine,
      vielen, vielen Dank, das freut mich sehr und ist natürlich in Ordnung - ich wollte ja vielen Bloggerinnen damit helfen!

      Herzlichst,
      Mara

      Löschen
  7. Danke. Danke. Danke.
    Sogar ich HTML-hassendes Etwas (Ich hatte im 1. Semester meines Studiums HTML und Multimedia) habe das verstanden und gleich ausprobiert.
    Funktioniert einwandfrei ;)

    Liebe Grüße
    Anni-chan
    anni-chans-fantastic-books.blogspot.de

    AntwortenLöschen
    Antworten
    1. Liebe Anni-Chan,

      das freut mich sehr, dass es auch geklappt hat! Zum Glück funktioniert es!

      Herzlichst,
      Mara

      Löschen
  8. Hallo Mara,
    hab nach nem Lesestatus Gadget gesucht und bin hier gelandet.^^
    Hab's ausprobiert und angepasst und bin jetzt super happy! Hatte vorher das Widget von lovelybooks.

    Danke für diesen Post! =) <3

    LG Vanessa

    meinefantasybuecherwelt.blogspot.de

    AntwortenLöschen
    Antworten
    1. Liebe Vanessa,

      oh, das freut mich, dass du hier gelandet bist und das Tutorial dir geholfen hat!
      Sehr, sehr gerne!

      Herzlichst,
      Mara

      Löschen
  9. Danke für das tolle Tutorial.. Endlich weiß ich, wie ihr alle den tollen Lesestatus hinbekommt. :)

    AntwortenLöschen
    Antworten
    1. Gerne, liebe Nicole. Ich schau's mir gleich mal auf deinem Blog an!

      Löschen
  10. Oh wie wunderbar, endlich eine Erklärung, die sogar ich verstehe *jubel*. Das werde ich gleich mal bei mir einbauen.

    Vielen lieben Dank für Deine Mühe :-)

    Meike

    AntwortenLöschen
    Antworten
    1. Super, ich hoffe, es hat geklappt und schicke dir viele liebe Grüsse, sowas mache ich gerne!

      Mara <3

      Löschen
  11. Hallo Mara!
    Vielen, vielen, vielen Dank für diesen Post! Du hast es super einfach erklärt, ich habe es sogar sofort hinbekommen und mir so viel Arbeit und Recherche erspart :)

    Einfach den Link kopieren und ein bisschen mit den Farben und Rundungen spielen und zack fertig: Ein eigener Lesestatus!
    Wenn du Lust hast, kannst du dir das Ergebnis ja mal ansehen: http://bcherstapel.blogspot.de

    Also vielen Dank! :))

    Liebe Grüße, Anni

    AntwortenLöschen
  12. Heiho! :D

    Auch ich habe deinen Post studiert und alles hat geklappt! :D
    VIELEN LIEBEN DANK!!!

    Herzliche Grüße
    Jane :) von http://mademoiselle-cake-liest.blogspot.it/

    AntwortenLöschen
  13. Also ich habe gerade einen super Blog für mich entdeckt :P Weißt du wie der heißt? wonderful-ne-books.blogspot.de
    Wunderschöner Blog und DANKE für das Tutorial! Genau das habe ich gebraucht ♥ Hab mir das gleich mal ausgedruckt, so hab ich es wortwörtlich immer griffbereit. DANKE! Ich fühle mich gerade wie ein HTML Genie/Nerd, weil ich es hinbekommen habe WUHUU!

    AntwortenLöschen
  14. Ich hätte auch liebend gern so ein tolles gadget aber ich finde bei meinen einstellungen nicht wo ich das HTML bearbeiten kann was ich echt schade finde, denn ich finde dieses Gadget besonder schön! ich hoffe du kannst mir damit helfen!
    LG Kira

    AntwortenLöschen
  15. Hallo liebe Mara, vielen Dank für diese wundervolle Erklärung, ich glaube das werde ich bei uns auch mal ausprobieren.
    Ganz nebenbei einen super Block hast du da!
    Gaaanz liebe Grüße Pauline

    AntwortenLöschen
  16. Danke der Code war sehr hilfreich ich werd ihn jetzt gleich mal anwenden

    AntwortenLöschen
  17. Hey liebe Mara, vielen Dank.... es hat mir sehr geholfen ich bin schon fast verzweifelt. ;)


    Liebe Grüße

    Katy

    AntwortenLöschen
  18. Hey ihr beiden!
    Hach, ich habe gerade über lovelybooks.de euren Blog gefunden und finde ihn toll! Hier bleibe ich gerne als Leserin! "Liebe ist wie Drachensteigen" habe ich schon so oft in der Hand gehabt, aber es mir bisher nie gekauft, weil ich ja eigentlich noch "genug" ungelesene Bücher habe (aber eigentlich kann man davon ja nie genug haben!). Aber trotzdem interessiert mich die Geschichte wahnsinnig und ich viel Gutes davon gehört! Wenn ihr mögt, könnt ihr mich auch gerne mal auf meinem Blog besuchen kommmen www.pantaubooks.wordpress.com. Wir haben denselben Geschmack und ich würde mich sehr freuen! :)
    Liebe Grüße
    Svenja

    AntwortenLöschen
    Antworten
    1. Liebe Svenja, das freut uns sehr, dass du zu uns gefunden hast! Wie lustig, dass du ausgerechnet unter diesem alten Post kommentierst ;) Ich werde nun gleich einmal auf deinem Blog vorbeischauen und mal gucken, was du so liest! Willkommen auf unserem Blog, und wir hoffen natürlich dich nicht zu enttäuschen! :D Ganz liebe Grüsse, Anaïs und Mara

      Löschen

Wir lieben Kommentare - Rückmeldungen, konstruktive Kritik und natürlich auch Lob.
Allerdings wird Spam und anderes sofort von uns gelöscht!