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 :)


46 Kommentare

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

    AntwortenLöschen
  2. Super, vielen Dank!!!
    Hat sofort geklappt!
    Liebe Grüße
    Christina

    AntwortenLöschen
  3. wundervolles Tutorial, richtig richtig klasse♥

    AntwortenLöschen
  4. 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

    AntwortenLöschen
  5. Hat super geklappt danke danke danke :):)
    Schaut doch mal vorbei :)
    www.sunkissedlovechild.com

    AntwortenLöschen
  6. Bei mir klappt das leider nicht:( Aber schöne Idee

    AntwortenLöschen
  7. 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

    AntwortenLöschen
  8. Schade, funktioniert leider nicht :( Diese Stelle gibt es bei mir nicht und an ähnlichen Stellen funktioniert es nicht :(

    AntwortenLöschen
    Antworten
    1. Nutzt du die Awesome AG Vorlage von Blogger?

      Löschen
    2. Also ich nicht und bei mir geht es auch nicht... :(

      Löschen
  9. Juhuuu... endlich was geschafft... jetzt nur noch die Schrift ändern, da muss ich ein wenig mehr rumprobieren
    www.bakingevents.blogspot.de

    AntwortenLöschen
  10. 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?

    AntwortenLöschen
    Antworten
    1. Schreib mir eine Mail, Blu, dann beantworte ich dir deine Frage. Du hast ja meine Adresse :)

      Löschen
  11. nice!!
    bei mir gibts ein gewinnspiel guck doch mal vorbei
    http://lealeistner.blogspot.de/2013/02/win-win-win.html#comment-form

    AntwortenLöschen
  12. Ohhhh vielen Dank, mein Kommentar wurde erhört :)

    AntwortenLöschen

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


    Das geht nicht? Ist das richtig???

    AntwortenLöschen
  14. 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 :)

    AntwortenLöschen
    Antworten
    1. Das würde mich auch interesieren!

      Löschen
    2. Das würde ich auch wirklich gerne wissen!

      Löschen
  15. Wann kommt der Show us your Blog Post?

    AntwortenLöschen
  16. 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♥

    AntwortenLöschen
    Antworten
    1. Ich finde die beiden bei mir auch nicht! :/

      Löschen
  17. 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

    AntwortenLöschen
  18. 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

    AntwortenLöschen
  19. 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
    :-*

    AntwortenLöschen
  20. 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...

    AntwortenLöschen
  21. 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!

    AntwortenLöschen
  22. Bei mir funktioniert alles, nur nicht die font-family ... :( Manno!

    AntwortenLöschen
    Antworten
    1. das ist bei mir auch so, irgendwie komisch.

      Löschen
  23. ich bekomm es leider auch nicht gebacken. die komplette kein problem aber den einzelnen

    AntwortenLöschen
  24. 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?

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

      Löschen
  25. Bei sind leider beide "Suchbefehle" nicht vorhanden..
    Schade :(

    AntwortenLöschen
  26. Bei mir funktionier alles bis auf font-familiy:"...", wie bekomme ich das hin? :)

    AntwortenLöschen
  27. Bei mir geht das leider auch nicht, schade :(

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

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

    AntwortenLöschen
  30. bei mir ist das problem dass er nichts davon findet aber die suche findet garnichts :-(

    AntwortenLöschen
  31. 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

    AntwortenLöschen
  32. Dieser Kommentar wurde vom Autor entfernt.

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

    www.torte-llini.blogspot.de

    AntwortenLöschen
  34. 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...

    AntwortenLöschen
    Antworten
    1. hat geklappt! nicht auf der hauptseite, sondern nur wenn man den post anklickt! ;D danke!!

      Löschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!