{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