Post-Titel-Styling No. 2

10 Kommentare


Hier zeige ich Dir, wie Du mit wenigen Klicks Deinen Post-Titel stylen kannst. 
Wer kennt das nicht: manche Schriften, die man soo gerne verwenden möchte, kann man im Blogger Vorlagen-Designer leider nicht aussuchen, deswegen zeige ich hier Schritt für Schritt, wie du die tollen "Google-Fonts"-Schriften für Deinen Blog nutzen und gleichzeitig Deine Post-Überschrift stylen kannst.

Ganz wichtig:  
Bevor Du mit Änderungen beginnst, mache bitte immer ein Backup Deines aktuellen Layouts! 


Dashboard > Backup/Wiederherstellung > Vollständige Vorlage herunterladen


Los geht's:

Mit Klick auf's Bild bekommst du die größere Ansicht ;)

Gehe auf Google-Fonts um Dir eine Schriftart auszuwählen. Auf der linken Seite kannst du vorsortieren nach Serifen-Schriften, Serifenlos, Display Schriften (nicht druckgeeignet), Handschriften oder Monospace (feste Laufweite). Wenn Du die passende gefunden hast, klicke auf der rechten Seite auf den Button "Quick-use".
TIPP: In der Regel sagt man, dass man möglichst nur 3 verschiedene Schriften gleichzeitig verwenden sollte, da das Gesamtbild sonst sehr unruhig wirkt. Auch sollte bei unterschiedlichen Schriften darauf geachtet werden, dass diese sich deutlich unterscheiden, da es sonst schnell "aus-Versehen-passiert" aussehen kann. Ein schönes Beispiel findet man auch hier.



Nachdem du auf "Quick-use" geklickt hast, gelangst du zur nächsten Seite, auf der Du nach unten scrollst und den blau markierten Code kopierst.



Gehe in Dein Blogger-Dashboard > Vorlage > HTML und füge genau unter dem <head>-Tag den eben kopierten Code ein. ACHTUNG: Vor der abschließenden Klammer muss unbedingt ein zusätzliches Slash-Zeichen (/) eingefügt werden (siehe Bild).
Anschließend klickst Du auf Vorlage speichern.



Gehe im Dashboard auf Vorlage > Anpassen > Erweitert > CSS einfügen und gib dort folgenden Code ein:

h3.post-title {
font-family: 'Pinyon Script', cursive;
font-size: 34px;
font-weight: bold;
text-align:center;
border-bottom: 1px solid #292929;
}
h3.post-title a:link {
color: #292929;
}

Nach der letzten Klammer (}) bitte Enter drücken, sonst erkennt Blogger den neuen Code nicht.
In der Live-Vorschau müssten jetzt die Änderungen (bis auf die Schriftart, die müssen wir Blogger erst noch mitteilen^^, siehe unten) bereits sichtbar sein, und Du kannst nun mit dem weiteren Styling beginnen. Probiere mit der unteren Erklärung einfach ein wenig herum, bis es Dir gefällt.


Das Styling
font-family: Ersetze 'Pinyon Script', cursive; mit dem Namen Deiner neuen Schriftart. ACHTUNG: Der Name gehört zwischen die beiden '' . Das Semikolon ; muss am Ende stehenbleiben!
Bei Arial (nur als Beispiel) würde also folgendes da stehen=   font-family: 'Arial';

font-size = Schrift Größe in Pixeln.

font-weight = Schriftgrad. z.B. bold=fett. Für normalen Schriftgrad bold; gegen normal; ersetzen.

text-align = Ausrichtung. (left; =linksbündig, center; =zentrieren, right; =rechtsbündig).

border-bottom = Linie unter dem gesamten Titel (1px= Dicke, solid= durchgezogen, #292929; = Farbe)

Der Post-Titel hat in der Regel lt. Vorlage die selbe Farbe aller anderen Links. Soll er jedoch eine andere bekommen, ohne alle Links des Blogs zu ändern, dann nutze dafür die Zeile color: und ersetze die Farbzahl (#292929;) gegen eine andere. Die Farbcodes kannst Du Dir bequem hier raussuchen. Achte darauf, dass das Semikolon ; jeweils stehenbleibt, denn das ist wichtig!



Viel Spaß damit!



10 Kommentare

  1. Vielen Dank! Ich bin für Tipps dieser Art immer dankbar!
    Liebe Grüße, Maarika

    AntwortenLöschen
  2. Wow ein toller Artikel, danke vielmals fuer den Denkanstoss!! Nun muss ich nur noch eine Anleitung fuer Wordpress finden, aber das wird ja hoffentlich nicht zu schwer sein... Liebe Gruesse Julia x

    AntwortenLöschen
  3. Vielen Dank für deine Hilfe, ich habe schon einiges bei mir umsetzen können. Freu mich auf neue Tutorials. Vielen Dank Susanne

    AntwortenLöschen
  4. Hallo meine Liebe,
    verfolge deine Tipps schon eine ganze Weile und finde sie wirklich super interessant. Aber irgendwie funktioniert das bei mir nicht. Mache was falsch - aber was?
    Ich versuche es einfach immer mal wieder.
    Liebe Grüße

    Manu

    AntwortenLöschen
    Antworten
    1. Hi Manu,

      wenn du alles ganz genau nach Anleitung gemacht hast, dann kann es gut sein, dass es einfach an deinem jetzigen Blogtemplate liegt. Nicht alle nehmen nämlich problemlos den Code an.
      Ich würde eine vorgegebene Blogger Vorlage aus der Kategorie "Einfach" empfehlen ;)

      Liebe Grüße
      Daniela

      Löschen
  5. Danke für deine super Tipps, ich freue mich jede Mal, wenn etwas Neues kommt! Und alles ist immer so super erklärt und ganz einfach anzuwenden! Wie bekommt man denn die Labels in so einem schönen Design über den Posttitel, wie bei dir, also wie hier zum Beispiel "Blog Tutorial"? Ich suche danach schon lange, konnte aber bisher nichts finden. Vielleicht kannst du mir ja weiterhelfen. Vielen lieben Dank schon mal :)

    Liebste Grüße, Sophie <3

    AntwortenLöschen
  6. Liebe Daniela,
    Du bist ein Engel - super, dass ich Deinen Blog gefunden habe :-)
    Habe bereits ein wenig Kenntnis in HTML,jedoch nicht mit CSS. Dein Tutorial für das Menü und den Posttitel kamen mir gerade wie gerufen.
    Das Anlegen des Menüs hat mich etwas Tüftelei gekostet,aber es sieht so aus, als habe ich es richtig hinbekommen.
    Der Code für den Posttitel war super einfach !
    DANKE für Deine Mühe mit dem Erstellen des Tutorials.
    Werde Deinen Blog auf meinem verlinken ;-)
    Liebe Grüsse aus Dänemark

    AntwortenLöschen
  7. Hi! Ich finde es wirklich toll, wie du das machts, aber mein Problem ist, dass ich die ganzen Schriften bei Google fonts nicht sehen kann. Es sieht irgendwie alles gleich aus :( Kannst du mir helfen?^^

    Lou~

    AntwortenLöschen
    Antworten
    1. Hi Lou~,
      das hört sich nach einem einfachen Darstellungsproblem deines Browsers an. Vielleicht mal den Cache leeren oder mit einem anderen Browser versuchen.

      LG Daniela

      Löschen
  8. Hallo,
    erstmal vielen Dank für die tollen Tipps! Die sind sehr hilfreich und helfen mir gerade bei der Umgestaltung meines Blogs ernorm!
    Bei mir tritt nur folgendes Problem auf und zwar, wird die neue Schrift bei der Vorschau richtig angezeigt, aber auf meinem Blog dann nicht angewendet.. dort ist alles beim alten.
    Woran könnte das denn liegen?

    Liebe Grüße,
    Jessi

    AntwortenLöschen

Danke für deine Nachricht!

Das könnte dich auch interessieren

Copyright

Der Inhalt dieser Seiten ist mein Eigentum und unterliegt dem deutschen Urheberrecht. Die Kopie, Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen vorab meiner schriftlichen Zustimmung.
© www.misses-cherry.de 2009-2017