Farbiger Balken hinter dem Post-Titel ♥♥♥


Dieses Tutorial ist ein Gast Beitrag von Steffi. Danke dafür. :)
Es geht darum, wie bei Balkenbild unter dem Widgettitel einen Text mit Farbe zu hinterlegen, hier ist die Vorgehensweise anders, zumal Steffi noch einige nette Dinge hinzugefügt hat.


Schritt 1

 
Öffnet Design --> HTML bearbeiten und sucht nach h3.






Schritt 2


Kopiert folgendes zwischen den {} ein:

background-color: #000000;
color: #ffffff;
display: inline;

Sodass es so aussieht:


Im Prinzip seid ihr dann fertig. Dann sieht es so aus:



Balken in ganzer Zeile

Wenn ihr einen ganzen Balken haben wollt, so wie hier:


Dann ändert ihr unter display von inline auf block ab.


Balkenhöhe


Dafür fügt ihr einfach ein neue Zeile hinzu: 

line-height: 10px;

Die Pixelzahl definiert die Höhe des Balkens. So sieht es dann aus:



Bei Color könnt ihr natürlich mit der Farbe spielen. Hier könnt ihr die Codes für bestimmte Farben aussuchen und hineinkopieren. :)

26 26 Kommentare

  1. Danke für den Tip! Hab ich sofort umgesetzt!
    Ich liebe diesen Blog!

    AntwortenLöschen
  2. Danke, danke, danke genau sowas habe ich schon seit langem gesucht!!!

    AntwortenLöschen
  3. Vielen Dank für den Tip, habs auch gleich angewendet :)

    AntwortenLöschen
  4. Super von euch das ihr uns gezeigt hat.
    Nur wie kann ich die Farbe ändern. Bei mir ist es grad blau auf schwarz, aber ich hätte gern weiß auf schwarz

    AntwortenLöschen
  5. Ja, das gleiche Problem wie Tatwiels habe ich auch. Wäre nett, wenn ihr das vielleicht auch erklären könntet. Kenne mich mit HTML nicht doll aus. (^_^)

    AntwortenLöschen
  6. Hiiilfe ich hab ein Problem ich hab mir halb mit Photoscape halb mit Picasa einen Header gebastelt. Ich hab am Anfang bei Picasa diesese 1100x250 eingegeben. Also wie groß der Header sein soll. Nur irgendwie hab ich soviel rumgebastelt und hin und her abgespeichert, ich weiß nicht mehr genau wann genau es passiert ist, aber auf einmal ist der Header 5120x1210 groß. Ist da irgendwo eine möglichkeit, dass ich das ganze kleiner mache? o.O Ich hab nicht wirklich viel Ahnung von diesen Programmen, aber ich wär wirklich froh, wenn ihr mir irgendwie tipps geben könntet :)

    AntwortenLöschen
  7. So cool your blog! Love it!

    Follow me? I'll be very happy if you do it!
    THank you so much!

    www.cipollainspiration.blogspot.com

    AntwortenLöschen
  8. manno, bei mir geht das nicht, nur bei über mich und wunschliste :/

    AntwortenLöschen
  9. kann man den Post-Titel auch nur Unterstreichen?

    AntwortenLöschen
  10. kann ich das auch beim datum machen?

    AntwortenLöschen
  11. da sind 5mal h3 und nie das gleiche und wenn ich das einfüge dann ist allles nur noch weiß

    AntwortenLöschen
  12. Danke für die vielen tipps, aber dieses hier klappt bei mir nicht, könnt ihr mir vielleicht sagen warum? :((

    AntwortenLöschen
  13. Hmm,danke schön, aber bei mir steht bei h3 was anderes, also nicht ganz so wie bei dir.
    Von daher bleibt alles weiß nach der Änderung, egal welchen Farbton ich auswähle.

    AntwortenLöschen
  14. echt gutes Tutorial!
    Bei manchen Blogs sieht es so aus als wäre ein Bild dahinter mit einem bestimmten Muster könnt ihr evtl erklären wie man soetwas macht? ;)

    AntwortenLöschen
  15. ich kann von inline nicht auf block ändern. ich kann schon, aber der blog zeigt das dannn gar nicht mehr an

    AntwortenLöschen
  16. bei mir gibt es diesen Abschnitt, nach dem man anfangs suchen soll nicht :(
    Was kann ich machen ?

    AntwortenLöschen
  17. wow vielen dank für die ganzen tipps.

    AntwortenLöschen
  18. Hi, dein Post ist ja schon älter, aber ich habe tatsächlich gefunden, was ich gesucht habe. Nur bekomme ich den Text (Posttitel) nicht weiß. Er ist als Linkfarbe bei mir grau angegeben. Und wenn ich die Farbe auf weiß stelle, kann man natürlich den Text in der Sidebar nicht mehr lesen, da er weiß auf weiß ist. Gibt es da noch einen Trick? LG Yna

    AntwortenLöschen
  19. das macht sooooo viel Spaß eure Tutorials umzusetzen! Vielen Dank, ich liebe Euch :-x
    pipa

    AntwortenLöschen
  20. Das mit dem farbigen Balken klappt zwar, aber die Schriftfarbe lässt sich nicht ändern. Es ist immer die, die ich als Link-Farbe eingestellt habe. Aber ich will, dass die Schriftfarbe im Balken weiß ist - was natürlich nicht für alle Links geht, da mein Hintergrund einfach weiß ist.
    Kann man das irgendwie ändern?

    AntwortenLöschen
  21. Habs sofort umgesetzt,allerdings kann man den Post-Titel nicht mehr Lesern und ich verstehe leider nicht wieso.
    Könnt ihr mir da helfen?

    AntwortenLöschen
  22. Tipp: Man kann es noch abrunden wenn man den Code:
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    border-radius:20px;
    unter background color setzt

    AntwortenLöschen
  23. Wie funktioniert das mit der neuen Bloggeroberfläche? ich finde garnichts mehr :(

    AntwortenLöschen
  24. Kann mir jemand auch sagen wie ich den Balken transparent bekomme?

    AntwortenLö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!

Hinweis: Nur ein Mitglied dieses Blogs kann Kommentare posten.