Tipps & Tutorials, tutorial

Anfangsbuchstabe des Posttitels individuell gestalten

Hallo liebe Leser von CPL. Ich bin Saskia von Saskias-Simplicity und heute werde ich hier mein erstes Tutorial veröffentlichen.

Ich möchte euch zeigen, wie ihr den Anfangsbuchstaben eures Posttitels individuell gestalten könnt.
 
So könnte das Ganze dann zum Schluss aussehen:
 
 
 
 

Schritt 1:

Ihr öffnet euren Blog und geht auf „Vorlage“. Dort klickt ihr nun auf „HTML bearbeiten“. Danach müsste sich ein Feld öffnen mit allen Informationen über euer Blogdesign. Wenn ihr die Tastenkombination „Strg“ und „F“ drückt, öffnet sich meistens oben rechts auf eurem Bildschirm ein Suchfeld.
Dort gebt ihr jetzt
h3.post-title, .comments h4 {
ein.
Diese Stelle müsste euch jetzt angezeigt werden. Wenn diese Stelle bei euch
nicht gefunden wird dann sucht nach .post h3 { .
 
 
 

Schritt 2:

Nach dem } von h3….. fügt ihr nun ein:
h3.post-title:first-letter {
in diesen Zwischenraum kommen gleich eure Befehle für den Anfangsbuchstaben
}
 
 
 
Dieser Code gibt an, wie zum Schluss euer Anfangsbuchstabe aussehen soll.
 

Schritt 3:

Jetzt könnt ihr euren Code individuell anpassen. Ich hab mal ein paar Ideen rausgesucht:
 
  • Schrift ändern: font-family:’Trebuchet’; Wenn ihr eine andere benutzen wollt als die, die euch Blogger zu Verfügung stellt, dann schaut euch dieses Tutorial bis zu Schritt 2 an, danach könnt ihr den Schriftnamen hier einfügen.
  • Schriftgröße: font-size:20px; – Die Zahl könnt ihr beliebig verändern, alternativ funktioniert auch eine Prozentzahl.
  • Dekoration: text-decoration:underline; – statt underline funktionieren auch: overline & line-through
  • Großbuchstabe: text-transform:uppercase;
  • Schriftfarbe: color:#000000; – Farbe hier auswählen:  http://www.colorpicker.com/
  • Hintergrundfarbe: background:#eeeeee; -Farbe könnteihr ebenfalls bei  http://www.colorpicker.com/ aussuchen
Euer Code könnte dann z.B. so aussehen:
 
 
 
Ich hoffe es hat geklappt 
Eure Saskia 🙂

45 Comments

  1. eleonora

    4. February 2013 at 14:44

    Ich liebe euren Blog, ihr habt immer so klasse Ideen <3

  2. Christina

    4. February 2013 at 15:07

    Super, vielen Dank!!!
    Hat sofort geklappt!
    Liebe Grüße
    Christina

  3. Elske

    4. February 2013 at 15:07

    wundervolles Tutorial, richtig richtig klasse♥

  4. Mademoiselle L.

    4. February 2013 at 15:14

    Super Tutorial! Gut erklärt, einfach zu verstehen und einfach schön geschrieben.
    Es hat auf Anhieb funktioniert, und es sieht toll aus 🙂 Kannst ja mal vorbeischauen 🙂
    http://realize-photography.blogspot.de/
    lg Lili

  5. Sandra Rosa

    4. February 2013 at 15:14

    Hat super geklappt danke danke danke :):)
    Schaut doch mal vorbei 🙂
    http://www.sunkissedlovechild.com

  6. Reca

    4. February 2013 at 15:24

    Bei mir klappt das leider nicht:( Aber schöne Idee

    1. Spruso

      10. February 2013 at 14:07

      bei mir leider auch nicht…

  7. Anonym

    4. February 2013 at 15:52

    Hello mates, its wonderful piece of writing on the topic of educationand fully defined, keep it
    up all the time.
    My web blog : Best registry Cleaner

  8. missrockable

    4. February 2013 at 15:55

    Schade, funktioniert leider nicht 🙁 Diese Stelle gibt es bei mir nicht und an ähnlichen Stellen funktioniert es nicht 🙁

    1. Bella Snow

      8. February 2013 at 18:05

      Nutzt du die Awesome AG Vorlage von Blogger?

    2. Anonym

      15. February 2013 at 17:49

      Also ich nicht und bei mir geht es auch nicht… 🙁

  9. BAKING EVENTS

    4. February 2013 at 15:58

    Juhuuu… endlich was geschafft… jetzt nur noch die Schrift ändern, da muss ich ein wenig mehr rumprobieren
    http://www.bakingevents.blogspot.de

  10. Anonym

    4. February 2013 at 16:35

    Achtung! Du hast 'fRont-size' geschrieben (; Und nicht FOnt size.
    Aber das mit den Google weg-fonts kapiere ich nicht ganz. Kann mir das jemand erklären?

    1. Dust

      8. February 2013 at 17:38

      Schreib mir eine Mail, Blu, dann beantworte ich dir deine Frage. Du hast ja meine Adresse 🙂

  11. Julia

    4. February 2013 at 23:02

    Ohhhh vielen Dank, mein Kommentar wurde erhört 🙂

  12. Sarah N aus K

    5. February 2013 at 10:24

    h3.post-title:first-letter {
    font-size:20px;
    text-transform:uppercase;
    font-family:'Sacramento'}

    Das geht nicht? Ist das richtig???

  13. fullmoonchild

    5. February 2013 at 14:40

    Oh kann man das auch mit den Gadjet Titeln?!?
    Könntest du da vielleicht die Änderung am Code posten? Herzlichen Dank für deinen Beitrag 🙂

    1. Bella Snow

      8. February 2013 at 18:20

      Das würde mich auch interesieren!

    2. Sakura Clow

      14. August 2013 at 16:40

      Das würde ich auch wirklich gerne wissen!

  14. Anonym

    5. February 2013 at 16:40

    Wann kommt der Show us your Blog Post?

  15. Fabienne♥

    5. February 2013 at 22:46

    Hallo,
    erstmal möcht ich sagen, dass das echt eine supercoole Idee ist, dass ihr diese Tricks mit uns teilt!:)

    Ich finde in meiner HTML nur beide Codes nicht :/

    Schade :/

    Liebste Grüße♥

    1. Helena Singer

      25. April 2014 at 18:09

      Ich finde die beiden bei mir auch nicht! :/

  16. Anonym

    7. February 2013 at 15:40

    ich muss jetzt einfach unbedingt was loswerden und zwar vielen vielen lieben dank ich liebe die tutorials hier und die haben mir echt total weitergeholfen 🙂
    ich finde grundsätzlich dass das hier einer der besten und nützlichsten blogs überhaupt ist. echt spitze weiter so :-*
    danke danke danke 🙂
    lg Vincy ♥

    http://dailybeautyroutine.blogspot.de

  17. Cathrin

    8. February 2013 at 17:46

    Klappt (eigentlich) super. Ich hab nur das Problem, dass sobald ich den Postitel anklicke der Buchstabe wieder "normal" ist. Hast du vllt eine Idee, was ich falsch gemacht habe 🙁

    Liebe Grüße
    Cathrin

  18. Anonym

    9. February 2013 at 15:45

    Hi liebes CopyPasteLove-Team! 🙂
    Als allererstes – ich finde euren Blog und die ganzen Tutorials wirklich gut & hilfreich und kann euch nur weiterempfehlen! Ich habe mir nun überlegt, auch einen Blog zu erstellen und bin nun am Design-Basteln.
    An dieser Stelle kommt meine Frage an euch: Wenn man einen post schreibet, ist der Text für meinen Geschmack viel zu nah am Seitenrand – wie bei euch ungefähr, aber auf meinem Blog hätte ich den Abstand zwischen dem Text und den Seitenrändern gerne etwas größer, damit alles übersichtlicher wirkt. :-/ Habt ihr da eine Idee oder ein Tutorial für mich? Wäre lieb wenn ihr unter diesem Kommentar antworten könntet!
    Liebste Grüße,
    Marie
    :-*

  19. Ines Caranaubahx

    16. February 2013 at 13:57

    Wieso funktioniert das nicht? :/

  20. Elicia Flapp

    17. February 2013 at 23:52

    Wäre schön wenn der Tutoschreiber sich mal melden würde damit wir herausfinden wieso das nicht klappt bzw welche Vorlage man dafür benutzen sollte…

  21. Valery Klein

    19. February 2013 at 20:29

    Super, dass Ihr hier so viele Tipps und Anleitungen gebt!

    Leider hat das Einfügen einer neuen Schrift bei mir nicht funktioniert. Ich bin bei Schritt 3 hängengeblieben. Die Fehlermeldung war: "Ihre Vorlage konnte nicht analysiert werden, da sie nicht korrekt formatiert ist. Sellen Sie sicher, dass alle XML-Elemente ordnungsgemäß geschlossen sind."

    Ehrlich, ich als html-Laie kann damit gar nichts anfangen ….
    Könnt Ihr mir sagen, was ich falsch mache? Danke!

  22. Agnes

    12. March 2013 at 20:05

    Bei mir funktioniert alles, nur nicht die font-family … 🙁 Manno!

    1. Marie

      9. June 2013 at 10:53

      das ist bei mir auch so, irgendwie komisch.

  23. Anonym

    15. March 2013 at 19:43

    ich bekomm es leider auch nicht gebacken. die komplette kein problem aber den einzelnen

  24. Marie

    13. August 2013 at 16:54

    Bei mir kommt der Erste Buchstabe im Blogtitel jetzt erst, wenn man mit der Maus drüber fährt, vorher fehlt der. kann ich das irgendwie ändern?

    1. lovemira

      15. August 2013 at 14:35

      Dann hast du es an der falschen Stelle eingefügt. Vor der eckigen Klammer darf kein a dabei stehen!

  25. Sunny ♥

    18. August 2013 at 14:42

    Bei sind leider beide "Suchbefehle" nicht vorhanden..
    Schade 🙁

  26. Ann-Kathrin Wagner

    22. August 2013 at 21:22

    Bei mir funktionier alles bis auf font-familiy:"…", wie bekomme ich das hin? 🙂

  27. Lisa Lait

    24. August 2013 at 14:36

    Bei mir geht das leider auch nicht, schade 🙁

  28. missbeautyandmore

    5. September 2013 at 9:00

    wie kann m an das bei blogger mit dem neune hinbekommen, bei mir findet er das gesuchte einfach nicht.

  29. Elisa ♥

    7. September 2013 at 17:17

    Was ich nicht versteh.. Warum kann ich die schrift nicht ändern?! Ich habe alles probiert! 🙁 Hat irgendjemand eine Lösung?? <3

  30. xoxo rosy

    9. November 2013 at 19:49

    bei mir ist das problem dass er nichts davon findet aber die suche findet garnichts 🙁

  31. Jule

    4. January 2014 at 12:03

    tolles Tutorial bei mir hat es sofort funktioniert! ich musste zwar erste die stelle etwas suchen und ausprobieren, aber ich habe es hinbekommen 😉

    Vielen Dank <3

  32. Lisa Heidenreich

    11. February 2015 at 14:52

    Super Post, schön einfach beschrieben hat nach Langer Suche der richtigen Zeile super geklappt!

    http://www.torte-llini.blogspot.de

  33. Nana Evilcherry

    12. February 2015 at 18:26

    Funktioniert nicht und ich nutze Minima als template… irgendeine tolle Idee, was ich falsch mache?
    h3.post-title:first-letter {
    font-size: 250%
    }
    wollte es ja nur grösser… aber leider…

    1. Nana Evilcherry

      14. February 2015 at 22:10

      hat geklappt! nicht auf der hauptseite, sondern nur wenn man den post anklickt! ;D danke!!

Leave a Reply