Post Titel Styling

16 Kommentare


Andrea von Fräulein An möchte Ihren Blog 'verschönern' und hat nach Hilfe gefragt, wie sie ihren Post-Header stylen kann. Nichts leichter als das... 

In diesem Blog-Tutorial: Post Titel Styling | No.I zeige ich Euch kurz, wie Ihr ganz einfach eine Linie unter Euren Post-Titel oder Header einfügen könnt. 


Geht dazu in Euer Dashboard > Vorlage > Anpassen.


Dann klickt Ihr auf Erweitert > CSS hinzufügen.


Im rechten weißen Feld gebt Ihr nun diesen Text ein (kopieren):



Nach der letzten Klammer } drückt Ihr ENTER und klickt auf 'Auf Blog anwenden'.


Das Styling:

  border-bottom: 1px solid #cccccc;
  • 1px bedeutet die Stärke der Linie.
  • solid ist die Darstellung als ganze Linie. Wollt Ihr eine gestrichelte Linie, dann ersetzt solid mit dashed, für eine gepunktete Linie mit dotted.
  • #cccccc ist der Farbcode der Linie. Unter www.colorpicker.com könnt Ihr die passenden Farbcodes zu Euren Wunschfarben einfach kopieren und gegen das cccccc ersetzen.
margin-bottom: 25px; ist der Abstand zwischen Linie und der ersten Zeile Eures Posts. 25 ist ein guter Wert, Ihr könnt damit jedoch spielen, bis Euch der Abstand am besten gefällt.
Vergesst auch nach der Farbänderung etc. bitte nicht das 'Auf Blog anwenden'  ;)


Linie unter dem Header

Wenn Ihr eine Linie unter Euren Header platzieren möchtet, dann geht Ihr genauso vor, gebt aber im CSS-Feld diesen Text ein:



Das Styling funktioniert genauso wie beim Post Titel.



Viel Spaß!


16 Kommentare

  1. Ah du Fuchs du :)
    Du bist ein Schatz. Ich versuche das gleich mal :)
    Und wenn du mir mit den Fotos noch helfen kannst *g*
    Nächstes Mal frage ich sofort bei dir nach :)
    Fühl dich gedrückt, Andrea

    AntwortenLöschen
  2. Vielen lieben Dank für das Tutorial. Ich lerne jeden Tag dazu was die Gestaltung meines Blogs anbelangt und bin froh um jeden Ratschlag, Tipp und jedes Tutorial. Wurde natürlich auch sofort probiert und für gut befunden.
    Also gerne mehr davon ;-)

    Liebste Grüße
    Fräulein Mai

    AntwortenLöschen
  3. Oh, vielen lieben Dank für das Tut! Hab es direkt mal umgesetzt!

    LG Schnittchen

    AntwortenLöschen
  4. Geil! Ich geh gleich mal spielen! :-D

    Tausend Dank! :-*
    Sanni (c:

    AntwortenLöschen
  5. Vielen lieben Dank.
    Das mußte ich direkt mal umsetzten!!!
    LG Kristina

    AntwortenLöschen
  6. Super, das habe ich auch gleich gemacht Toll, dass Du Dein Wissen teilst. Vielen Dank dafür!

    LG
    Henrike

    AntwortenLöschen
  7. Super, vielen, vielen Dank... bin begeistert!!!
    Wenn du noch mal Muße hast... würde mich dieses rechts unten "Back to Top" sehr interessieren ; - )
    Das finde ich nämlich toll, zu jeder Zeit wieder nach oben zu kommen!
    Ganz liebe Grüße
    Sandra

    AntwortenLöschen
  8. Oh wie wunderbar, wieder was gelernt! Danke!
    Liebe Grüße, Maarika

    AntwortenLöschen
  9. hach Du weißt einfach alles und kennst Dich so gut aus, DANKE, dass Du das immer mit uns teilst....ich bin ja die totale Frau Ahnungslos was diese Dinge betrifft !

    ganz liebe Grüße
    und einen schönen 4.Advent
    Nane

    AntwortenLöschen
  10. Vielen lieben Dank für das tolle Tutorial!
    Ich hab's gleich ausprobiert :)

    LG Simone

    AntwortenLöschen
  11. Was kann ich versehentlich verändert haben, wenn bei mir nach dem ´klick´ auf "Blog anwenden" nichts passiert?
    Danke :)

    LG Hannah

    AntwortenLöschen
  12. Danke! Danke! Danke! Hab vor einiger Zeit mein Design geändert... und diese fehlende Abgrezung hat mich sooooooo gestört. Danke!

    AntwortenLöschen
  13. Danke für die tolle Anleitung! Hat super geklappt - weil es herrlich verständlich geschrieben war!
    Liebe Grüße
    Sali

    AntwortenLöschen
  14. du machst so gute Anleitungen, leicht verständlich und für jeden machbar!
    Danke,Danke,Danke, dass du dein Wissen mit uns teilst <3
    Ich bin gerade dabei meinen Blog mit deinen Sachen "aufzuhübschen" und es klappt alles sehr gut!
    Das einzige Problem, welches ich öfters habe ist, dass wenn ich etwas suchen möchte z.B. "/body" dann wird bei mir nichts gefunden, also ich bleibe in der ersten Zeile...
    Hast du eine Idee woran das liegen könnte ?

    Liebste Grüße
    Anna

    AntwortenLöschen
  15. Hallo! Danke für die tollen Tipps - eine Frage habe ich noch! Kann ich den Strich weiter unter den Post-Titel ziehen, damit die beiden "nicht so aufeinander kleben" UND kann ich die Linie verkürzen?

    LG Antonie

    AntwortenLöschen
  16. Wow! Danke für diesen wunderbaren, verständlichen Beitrag. Ich bin grade am Umbau meines Blogs und bin immer froh, wenn ich gute Tipps finde. Ich habe mir jetzt schon einige Beiträge von dir durchgelesen & ich bin wirklich froh deine Seite gefunden zu haben. Das lässt sich alles super easy anwenden.
    Ich würde gerne wissen, wie du in deiner Linie unter dem Post Titel die Kommentaranzahl eingebaut hast. Könnte man da auch das Datum einfügen?

    Liebe Grüße,
    Claudia von the-booklounge.blogspot.de

    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

Kontakt

Name

E-Mail *

Nachricht *