Tutorial: Fortschrittsbalken

Hallo Leute,

nach einer gefühlten Ewigkeit habe ich wieder ein kleines aber feines Tutorial. Dieses eignen sich besonders für Buchblogs, da es sich hierbei um einen Fortschrittsbalken handelt. Mit dem kann man, wie der Name ja schon sagt, seinen Fortschritt festhalten und anzeigen. Die meisten Buchblogs haben einen, man kann den Balken aber sicherlich auch auf andere Themengebiete anwenden.

Zum einfügen eines solchen Balkens geht ihr auf 

Layout > Gadget hinzufügen > Grundlagen > HTML/Java-Script

In dem freien Feld, was nun erscheint, gebt ihr folgendes ein:

<div class="art-block widget widget_progressbar" id="progressbar-6"><div class="art-block-body"><div class="art-blockcontent"><div class="art-blockcontent-body"><style type="text/css">#progressbar {width: 100%;height: 10px;background-color: #000000;border: 2px solid none;margin: 0;padding: 0;}#progressbar div {height: 100%;background-color: #00000; border-right: 2px solid none; margin: 0;padding: 0;}</style> <p style="text-align: center;"></p><p></p><div id="progressbar" style="margin: 0 style="><div style="width:0%"></div></div><p></p> <p style="text-align: center;">TEXTITEXT</p><p style="text-align: center;">

</p><div class="cleared"></div></div></div> <div class="cleared"></div></div></div>

Hier gebt ihr die Breite eures gesamten Balkens ein. 100% bedeutet, dass er die ganze Breite eurer Sidebar einnimmt. Wenn eure Sidebar also 100px breit ist, ist das auch der Balken. 

Hier fügt ihr eine Farbe nach eurer Wahl ein, sie bestimmt die Hintergrundfarbe eures Balkens, beziehungsweise den Part, der noch nicht ausgefüllt ist. Farben könnt ihr HIER finden.

Hier fügt ihr eine Farbe nach eurer Wahl ein, sie bestimmt die Fortschrittsfarbe eures Balkens, beziehungsweise den Part, der erscheint, wenn ihr Fortschritte macht. 

Hier gebt ihr an, wie viel Prozent Fortschritt ihr schon gemacht habt. Einen Prozentrechner gibt es HIER. 

Hier könnt ihr einen Text nach Belieben einfügen, zum Beispiel wie viel Prozent ihr schon geschafft habt.

Dann noch auf Speichern klicken und der Balken sollte fertig sein. Ihr könnt dann die Prozentangabe und den Fortschritt immer wieder ändern, indem ihr das Gadget bearbeitet. Der fertige Balken sollte dann so aussehen:

50% von 100%

Tutorial: Zitate individualisieren

Hallo Leute,

ich persönlich finde es ja schade, dass bei den Standadlayouts von Blogger die Zitate so unspektakulär und langweilig aussehen. Also nur leicht eingeschoben sind und sonst nichts. Mit diesem kleinen Trick, den ich euch zeige, könnt ihr vielleicht keine Wunder bewirken, aber die Zitate wenigstens ein klein wenig hervorheben.

Geht auf Vorlage > HTML bearbeiten > klickt einmal mit der Maus auf das HTML-Feld > drückt Strg. und F gleichzeitig > gib in das Suchfeld .post ein.

Der gesuchte Bereich sollte nun so aussehen:

.post {

  margin: 0 0 $(post.margin.bottom) 0;

}

Fügt nun unter die } Klammer folgenden Befehl ein:

.post blockquote {

background:  #000000;

border-left: 2px dotted #000000;

padding: 5px;

font-family: Trebuchet MS;

font-size: 12px;

color: #000000

}

Hier könnt ihr euch eine Farbe für den Hintergrund aussuchen. Eine Seite, wo ihr die Farbcodes finden könnt, habe ich HIER für euch. 

Hier könnt ihr aussuchen, wie breit eure Linie sein soll. Je kleiner die Zahl, desto feiner die Linie. Je höher die Zahl, desto breiter die Linie.

Hier könnt ihr dotted eingeben für eine gepunktete Linie, dashed für eine gestrichelte und solid für eine durchgezogene Linie.

Hier könnt ihr eine Farbe für die Linie aussuchen und einfügen.

Hier gebt ihr die Schriftart ein, die ihr für eure Zitate haben wollt. Beachtet, dass die Schrift eingespeichert sein muss, wenn ihr eine individuelle Schriftart und keine vorgespeicherte Blogger-Schriftart nutzen wollt. Dazu könnt ihr euch mein LETZTES TUTORIAL ansehen.

Hier könnt ihr die Schriftgröße variieren. Am besten nehmt ihr die gleiche Schriftgröße wie für euren gesamten Text.

Hier könnt ihr die Schriftfarbe nochmal ändern.

Nach der Zeile border-left könnt ihr auch die Befehle border-right: 2px dotted #000000, border-bottom: 2px dotted #000000 und border-top 2px dotted #00000 einfügen, dann erscheinen auch rechts, unter- und oberhalb des Zitatekastens Linien.

Dann noch auf Vorschau klicken, abspeichern und dann sollten eure Zitate sich wenigstens ein bisschen vom Rest eurer Texte abheben.

Ich hoffe, das Tutorial war verständlich und konnte helfen!

xoxo KQ

Tutorial: Eigene Schrift in den Blog einbinden

Hallo,

ihr denkt euch sicherlich auch ab und zu, dass Blogger einfach viel zu wenige Schriftarten zur Verfügung stellt, mit der man seinen Blog verschönern kann. Und alle Blogs sehen dann immerzu gleich aus. Dann gibt es oft das Problem, dass man es zwar schafft, eine eigene Schrift einzubinden, die wird dann aber nur vom eigenen PC angezeigt und alle anderen sehen an ihren PC dann eine Ersatzschrift wie Times New Roman oder Arial, was ja nicht Sinn und Zweck der Sache ist.

Wichtig ist, dass man Schriften benutzt, die für das Web freigegeben sind und somit von allen Computern gelesen werden können. Solche Schriften nennt man Webfonts und von denen gibt es mittlerweile eine gute Menge.

Meine persönliche Lieblingsseite für Schriftarten ist GOOGLE FONTS. Mein Tutorial basiert auch auf dieser Seite. Ich finde diese Seite sehr gut, da es dort schon 624 Schriftarten gibt und man verschiedene Beispiele hat, mit denen man sich die Schriften anschauen kann. Es gibt sogar die Möglichkeit, einen eigenen Beispielsatz zu schreiben.

1. Wenn ihr euch auf der Seite eine schöne Schrift ausgesucht habt, klickt dann auf die Schaltfläche --->Quick-use.