Samstag, 28. Dezember 2013

Schrift-Größe der Blog-Beschreibung anpassen

In meinem letzten Beitrag habe ich euch bereits erklärt, wie ihr eine Blog-Beschreibung erstellen/ bearbeiten könnt und wie ihr diese in eurem Blog anzeigen könnt.

Heute geht es um die Schriftgröße der Blog-Beschreibung.

Wir beschäftigen uns zunächst damit, warum man die Schriftgröße der Blog-Beschreibung anpassen sollte. Danach zeige ich euch dann, wie ihr die Schriftgröße eures Blog-Beschreibungstextes anpassen könnt.

In einem Fall werden wir das mit Hilfe des Blogger-Vorlagendesigners machen, in allen anderen Fällen werden wir eine klitze-kleine Anpassung des HTML-Codes vornehmen.
Das Bild zeigt den Header mit Blog-Beschreibung, in der voreingestellten Schriftgröße.
Blog-Beschreibung in Standard-Schriftgröße


Übersicht:
  • 1. Warum die Schriftgröße der Blog-Beschreibung anpassen?
  • 2. bis 4. Schriftgröße der Blog-Beschreibung anpassen
    • 2. Vorlage „Awesome AG”
    • 3. Vorlage „Einfach”
    • 4. Vorlagen „Bildfenster”, „Wasserzeichen”, „Fantastisch” und „Reise”


1. Warum sollte ich die Schrift-Größe der Blog-Beschreibung anpassen?

Aus Design-Gründen – bei den meisten Vorlagen ist die Blog-Beschreibung größer als der übrige Text im Blog. Mir persönlich gefällt das nicht, deswegen passe ich die Schriftgröße der Blog-Beschreibung gerne an. Letzen Endes muss du aber selbst entscheiden, wie du das in deinem Blog machen möchtest.


Bei der Vorlage „Awesome AG” ist die Anpassung der Schriftgröße über den Blogger-Vorlagendesigner möglich, bei den übrigen Vorlagen musst du den HTML-Code anpassen.



2. Schrift-Größe der Blog-Beschreibung ändern/anpassen – bei der Vorlage „Awesome AG”

2.1. Anleitung zur Anpassung der Größe der Blog-Beschreibung bei der Vorlage „Awesome AG”

Solltest du die Vorlage „Awesome AG” verwenden, kannst du die Schriftgröße deiner Blog-Beschreibung ganz einfach über den Blogger-Vorlagendesigner anpassen. Einfach unter „Erweitert” – „Blog-Beschreibung”.

2.2. Klickweg – Schrift-Größe Blog-Beschreibung – Vorlagendesigner

  1. Blog-Verwaltung
  2. Reiter „Vorlage”
  3. „Anpassen”
  4. Im Blogger-Vorlagendesigner „Erweitert”
  5. Unterpunkt „Blog-Beschreibung”
  6. Schriftgröße eingeben
  7. „Auf Blog anwenden”



3. Schrift-Größe der Blog-Beschreibung ändern/anpassen – bei der Vorlage „Einfach”

3.1. Anleitung zur Anpassung der Schrift-Größe der Blog-Beschreibung bei der Vorlage „Einfach”

Um die Schriftgröße der Blog-Beschreibung bei der Vorlage „Einfach” zu ändern, müssen wir den HTML-Code der Vorlage anpassen.

Wichtig: bevor man Änderungen am HTML-Code vornimmt, sollte man die Blog-Vorlage sichern.


3.2. HTML bearbeiten und HTML-Code-Suche öffnen

Gehe in der Blog-Verwaltung auf „Vorlage” und klicke dann auf „HTML bearbeiten”.

Um die richtige HTML-Code-Suche zu öffnen klickst du mit der Maus irgendwo in den HTML-Code, anschließend drückst du auf deiner Tastatur „Strg” + „F” oder „F3”.
Wichtig: Dein Mauszeiger muss im HTML-Code blinken, ansonsten öffnet sich nicht die HTML-Code-Suche sondern nur die normale Browser-Suche. 


3.3. Blog-Beschreibung HTML-Code finden

Nun musst du nach dem HTML-Code der Blog-Beschreibung suchen. Dazu tippst du den folgenden Begriff in das kleine Suchfeld und drückst „Enter”:
description.text.size


3.4. HTML-Code der Blog-Beschreibung anpassen

Du solltest dann die folgenden Zeilen HTML-Code sehen oder so Ähnliche:
<Variable name="description.text.size" description="Description Text Size" type="string" default="140%" value="140%"/>
Falls nicht musst du weitersuchen, indem du nochmals „Enter” drückst.

Um nun die Schriftgröße deiner Blog-Beschreibung anzupassen, änderst du einfach den Gelb markierten Wert. Du kannst hier einen Wert in Prozent angeben, dieser entspricht bei 100% der Schriftgröße deines Seitentextes. Oder du gibst einen Wert in px an, zum Beispiel „10px”.


3.5. Vorlage speichern

Nachdem du die Änderungen mit einem Klick auf „Vorlage speichern” gespeichert und angewendet hast, ist die Schriftgröße deiner Blog-Beschreibung entsprechend angepasst in deinem Blog sichtbar.
Probiere verschiedene Schriftgrößen aus und nimm die, die dir am Besten gefällt.

Mit der Schriftgröße sieht das bei mir zum Beispiel so aus:
Das Bild zeigt den Header mit Blog-Beschreibung, in einer angepassten Schriftgröße, 10px.
Blog-Beschreibung in der Schriftgröße 10px




4. Schrift-Größe der Blog-Beschreibung ändern/anpassen – bei den Vorlagen „Bildfenster”, „Wasserzeichen”, „Fantastisch” und „Reise”

4.1. Anleitung zur Anpassung der Schrift-Größe der Blog-Beschreibung bei den Vorlagen „Bildfenster”, „Wasserzeichen”, „Fantastisch” und „Reise”

Wie bei der Vorlage „Einfach”, müssen wir auch bei diesen Vorlagen den HTML-Code der Vorlage anpassen.

Auch hier sollte man, bevor man Änderungen am HTML-Code vornimmt, die Blog-Vorlage sichern.


4.2. HTML bearbeiten und HTML-Code-Suche öffnen

Gehe auch hier in der Blog-Verwaltung auf „Vorlage” und dann auf „HTML bearbeiten”.

Auch hier gilt: Um die richtige HTML-Code-Suche zu öffnen klickst du mit der Maus irgendwo in den HTML-Code, anschließend drückst du auf deiner Tastatur „Strg” + „F” oder „F3”.
Wichtig ist, dass dein Mauszeiger im HTML-Code blinkt, ansonsten öffnet sich nicht die HTML-Code-Suche sondern nur die normale Browser-Suche. 


4.3. Blog-Beschreibung HTML-Code finden

Nun musst du nach dem HTML-Code der Blog-Beschreibung suchen. Dazu tippst du den folgenden Begriff in das kleine Suchfeld und drückst „Enter”:
class='description'


4.4. HTML-Code der Blog-Beschreibung anpassen

Du solltest dann die folgenden Zeilen HTML-Code sehen:
<b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
Du musst nun den grün markierten Teil durch den folgenden ersetzen:
<p class='description' style='font-size: 10px;'> 
Um die Schriftgröße deiner Blog-Beschreibung anzupassen, änderst du einfach den Gelb markierten Wert.
Im Ergebnis sollte dein HTML-Code dann so aussehen:
<b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description' style='font-size: 10px;'><span><data:description/></span></p>
  </div>
</b:includable> 


4.5. Vorlage speichern

Nachdem du die Änderungen mit einem Klick auf „Vorlage speichern” gespeichert und damit auch angewendet hast, ist die neue Schriftgröße deiner Blog-Beschreibung in deinem Blog sichtbar.
Am Besten probierst du verschiedene Schriftgrößen aus und am Ende nimmst du die, die dir am meisten gefällt.



Fragen, Wünsche, Anregungen

Ich hoffe meine kleine Anleitung hat dir weitergeholfen, falls es nicht funktionieren sollte, du Fragen, Wünsche oder Anregungen hast, darfst du mir gerne einen Kommentar hinterlassen oder mir eine Nachricht über mein Kontaktformular schicken.

Kommentare:

  1. Hallo,

    ich versuche gerade, die Schriftgröße meiner Blogbeschreibung zu verändern (per HTML-Code).
    Auf der Suche nach einer Lösung für mein Problem habe ich diese tolle Beschreibung hier entdeckt.
    Allerdings habe ich Schwierigkeiten bei der Ausführung:

    Tippe ich description.text.size in das Suchfeld ein, werden keine Übereinstimmungen gefunden.
    Vielleicht kannst du mir ja weiterhelfen?

    Liebe Grüße, Betty

    AntwortenLöschen
    Antworten
    1. Hallo Betty,
      vielen lieben Dank für deinen Kommentar. Ich musste feststellen, dass das mit 'description.text.size' tatsächlich nur mit der Vorlage „Einfach” funktioniert.
      Die neue Version der Anleitung sollte jetzt auch bei deiner Vorlage funktionieren.
      Falls du noch Fragen hast, melde dich einfach noch mal.

      Löschen
  2. Hey Ben,
    super! Vielen Dank für deine schnelle Antwort und Hilfe, jetzt hat alles geklappt.

    AntwortenLöschen
  3. Hat mir super geholfen, vielen Dank!
    habt ihr zufällig auch so eine Hilfe um die Schriftart der Blogbeschreibung zu ändern ?
    Liebe Grüße,
    Lauri

    AntwortenLöschen
  4. Hallo Ben,
    das hat wirklich super geklappt, vielen Dank für die einfache Anleitung! :) Könntest du mir vielleicht noch erklären wie ich es schaffe, dass die Blogbeschreibung mittig im Bild unter dem Blognamen ist, das krieg ich nämlich einfach nicht hin... :D
    Alles Liebe

    AntwortenLöschen
  5. Hat mir als ziemlicher Anfänger wirklich geholfen, vielen Dank!

    Gruß Jens

    AntwortenLöschen