Hallo Ihr Lieben,
dieser Post zeigt euch, wie ihr die Zeile unter eurem Posttitel verschönern und anpassen könnt. Wer wissen will, wie das Datum da hin kommt, sollte sich diesen Post "Datum unter Posttitel" mal durchlesen.
Beginnen wir mit dem CSS:
Zeile allgemein bearbeiten
1. Öffne Dashboard >> Vorlage >> HTML bearbeiten.
2. Sucht nach folgender Zeile: ]]></b:skin>
3. Davor gebt ihr folgendes ein - wenn ihr richtig steht, sollte die Schrift blau sein. Passt auf, dass ihr nichts vom vorherigen Teil löscht.
.post-header{}4. Zwischen die Klammer könnt ihr folgende Properties einfügen (es gibt natürlich noch mehr, aber sie alle hier aufzuzählen wäre Wahnsinn) - dahinter steht auch die /*Erklärung*/ (die könnt ihr am Ende löschen):
background:#eee; /*Hintergrundfarbe*/
background:url(http://www.xyz.de/bild.jpg) no-repeat; /*Hintergrundbild*/
text-align:center; /*Textausrichtung*/
font-size:16px; /*Schriftgröße*/
padding:5px 5px 5px 5px; /*Abstand: Oben rechts unten links;*/
Fehlt etwas? Dann schreibt es mir und ich ergänze diese Liste. Mehr Properties + Erklärung findet ihr hier.
5. Speichern.
Einzelne Elemente abtrennen
Jetzt zeige ich euch noch, wie man die Punkte zB. mit einem "//" abtrennt. Wer nicht so sehr mit dem HTML vertraut ist, dem empfehle ich, es auf einem Testblog auszuprobieren oder davor sich einen Back Up zu machen (unter Vorlage ist rechts oben ein Back-Up Button).
1. Sucht in eurem HTML nach post-header. Beim zweiten Ergebnis mit <div class='post-header'> seid ihr richtig.
2. Ich habe euch den Code bei unserem Beispiel eingefärbt. Der Code für die Autorenanzeige ist grün und beginnt mit <span class='post-author vcard'> und endet bei </span>. In rot folgt die Zeitangabe, welches bei <span class='post-timestamp'> beginnt und mit </span> endet. Seht ihr schon die Ähnlichkeit? Anhand der Klassen (class='...') kann man in etwa herauslesen, was dieser Teil anzeigt.
3. Habt ihr herausgefunden, wie es bei euch aufgeteilt ist? Gut, dann könnt ihr eure Trennung zwischen den </span> und <span class='...'> einfügen (s. im Bild zwischen dem roten & gelben Teil). Ihr könnt dazwischen einfach ein Zeichen kopieren - schaut doch mal auf CopyPasteCharacter, vielleicht findet ihr dort etwas?
4. Speichern.
Ich wünsche euch gutes Gelingen!
Könntet ihr vllt auch noch erklären, wie man den Kommentarlink umbenennt, nachdem man euer oben verlinktes Tutorial mit dem Datum/Kommi unter den Posttitel verschieben gemacht hat? Weil ich habe das ausprobiert und sobald ich das Tutorial gemacht hatte, war dann zwar alles am richtigen Platz, aber es stand da wieder dieses Kommentare: ...
AntwortenLöschenEure Tutorials sind immer so toll, ich freue mich auf noch viele mehr :)
Das kommt gerade zur rechten Zeit, weil ich sowas in mein neues Design einbauen möchte!
AntwortenLöschenDavon abegesehen:
Ich plane einen kleinen Vorstellungspost von Seiten, die gute Webdesign/Tuturials/Tipps haben, und würde CPL in diesem Rahmen auch gerne vorstellen. Ist es ok, wenn ich euren Header dafür verwende (Sozusagen als Vorschaubild/Icon/Überschrift) in dem Post, damit das alles etwas anschaulicher wird.
LG
Moni/Penny
Hey, schön dass es dir gefällt :) Und klar! Du darfst dich gerne bedienen, wenn es für eine Vorstellung ist :)
LöschenSuper, danke!:)
LöschenFunktioniert leider gar nicht bei mir :(
AntwortenLöschenWas funktioniert denn nicht?
LöschenBei mir funktioniert es auch nicht :(
AntwortenLöschenWenn ihr mir nicht sagt, was genau nicht funktioniert, dann kann ich euch nicht helfen. Erscheint dann nichts oder tut sich nichts oder wird es falsch dargestellt? Ich kann leider keine Gedanken lesen...
LöschenHey Mira, bei mir funktioniert das leider auch nicht. Da passiert gar nichts, also alles bleibt so wie es war ... Hast du eine Idee, woran das liegen könnte? <3
AntwortenLöschenHey, bei mir funktioniert es auch nicht.
AntwortenLöschenich finde diesen code: ]]> in meinen Html's nicht. Nur etwas ähnliches: ---
wenn ich jetzt einfach so weiter mache wie du es oben beschrieben hast, ändert sich nichts. Ich habe lediglich den code in meiner Navbar stehen ;) Trotzdem danke.
Vielleicht kannst du mal bei mir vorbei schauen? Da stehen ganz viele Fragen auf die ich keine Antwort weiß :(
LG Lacerta // http://lacertasdiaries.blogspot.de
Okay jetzt hat es zwar geklappt aber bei mir ist das voll komisch verschoben, wie bekomm ich das weg? ist schwer zu erklären, musst du dir anschauen: http://lacertasdiaries.blogspot.de/
AntwortenLöschenDanke <3
du hast die // falsch gesetzt. Bei dir sieht das so aus:
Löschen< span > [Code von Kommentar] < /span> < span > // [Code vom Zeitstempel] < /span >
Dieses // muss zwischen < /span > und < span > sein!
Oh nein, ich kapier's nicht :( diese // hab ich im Layout eingefügt und nicht bei html. was heißt denn das mit dem span? (sorry kann es nicht einfügen, dann darf ich es nicht posten :()
LöschenOh es tut mir Leid ich hab zusätzlich noch eine Frage... & zwar hab ich gesehen, dass du in deinen Posts einzelne "Überschriften" hast, die auch nochmal unterstrichen sind. Wie machst du das? Danke vorab und schönes Wochenende <3
AntwortenLöschenHat super geklappt. Ich habe nur ein klitzekleines Problem. Wie kann ich die Abstände dazwischen ändern ? Bei mir sitzt der Name fast im Datum :-)
AntwortenLöschenSchau mal hier: http://meineinzigartigblog.blogspot.de/ Danke im Vorraus....
Schau mal im Post, ich habe den Code hinzugefügt :)
LöschenLieben Dank Mira. Es hat funktioniert. :-)
LöschenHallo,
AntwortenLöschendie Anleitung ist echt super, danke! Ich hab alles so eingegeben, aber trotzdem will es irgendwie nicht. Ich weiß auch nicht worans liegt. :/ Liegt es vlt an der Vorlage?
Das ist mein Blog: http://buecherfotografie.blogspot.co.at/
Bei mir tut sich da leider auch gar nichts :/
AntwortenLöschenDu hast auch nichts direkt unter den Posttiteln, was du gestalten kannst. Du musst den ersten Teil des Tutorials machen!
LöschenHey :) Danke für die Erkäarung, aber ich habe auch diesen CSS eingefürgt und gespeichert, doch bei mir tut sich auch gar nichts. (lucypeacheslayout.blogspot.de) Also alles ist wie vorher :o
AntwortenLöschenxo peaches <3
Huhu und vielen Dank! Also ich kann das zentrieren und so. Der Code klappt. Nur leider steht außer des Autors alles andere nicht mit oben. Im Blogpost bearbeiten unter layout habe ich schon alles so angeordnet, dass es eigentlicht oben ist, aber das ist es trotz speichern nicht... Hast du eine Idee?
AntwortenLöschenwww.mamahoch2.de
LG Bianca
Am einfachsten ist da, wenn du deine Widgetvorlage vom Blog1 (unter HTML Bearbeiten) zurücksetzt. Dann werden auch Änderungen am Blog1-HTML zurückgesetzt, aber das ist ziemlich idiotensicher.
LöschenHey Mira :)
AntwortenLöschenDas Tutorial ist super und es hat auch fast komplett geklappt, aber ich schaffe es irgendwie nicht, die einzelnen Sachen mit so einem Strich | zu trennen...Ich hab auch noch mal überprüft, ob ich es an der richtigen Stelle gesetzt habe, aber es sieht genauso aus, wie auf deinem Bild :(
Danke schon mal (:
Alles Liebe, Nancy x
Das ist mein Blog: http://booksarehiddenworlds.blogspot.de/
ich hab das gleiche problem, kann es auch nicht trennen :(
Löschenund kann man die schriftart auch noch ändern und dieses "um" vor dem datum wegbekommen?
hoffe du kannst mir helfen, es sieht im moment echt nicht schön aus (katiys.blogspot.de)
danke schonmal und ganz liebe grüße!:)
Hallo Mira, also bei mir geht es auch nicht, cih setzte die Sachen immer zwischen span> und </span, allerdings erscheint das bei mir nicht in der Vorschau und dann auch nicht im Blog. Außerdem sitzen die "Sachen" immer in 2 Zeilen, statt in einer O.o
AntwortenLöschenIrgendwie doof.
Huhu Mira :)
AntwortenLöschenMit Margin-top und so bin ich meinem Ziel schon ganz nahe gekommen. (ich wollte einfach nur ein Bild unter den Posttitel legen, also nicht das ganze Tutorial übernehmen)
Ich habe aber das Problem, dass der Titeltext immer noch in der Blog-üblichen Linkfarbe erscheint, obwohl ich schon: font-color: #000000 stehen habe. Irgendwie ignoriert der die neue Farbgebung. auch wenn ich !important dahinter schreibe. Hast du eine Lösung?
Die meisten anderen Tutorials im Internet hatten komplett anders aussehende Codes. Speziell direkt beim H3-Teil. Nach der Umstellung auf die neue Vorlage finde ich die meisten Codes nicht mehr, auch wenn ich IM Code suche...
Liebe Grüße!
Eure Tutorials sind Lebensretter, wenn man -wie ich- 0 Ahnung vom Coden hat...
Nachdem ich bestimmt 3 Tage gesucht hatte bevor ich gestern die Frage gestellt habe, heute die Antwort:
LöschenSuchen: a:link {
text-decoration:none;
color: $(link.color);
}
Darunter einfügen:
h3.post-title a:link{
text-decoration:none;
color: #00ff00;
}
h3.post-title a:visited{
text-decoration:none;
color: #00ff00;
}
Gefunden auf: http://productforums.google.com/forum/#!topic/blogger-de/wZAwL6pRw_k
Hat das eeeewig gedauert...
Hey bei mir tut sich leider auch nichts. Also hab den Strich zwischen dem eingefügt was du gesagt hast aber man sieht nichts :(
AntwortenLöschenWoran kann das liegen ?
Hey Mira, ich wollte fragen, ob du mir meine Frage, doch noch beantworten könntest, die ich im September mal gepostet hatte??
AntwortenLöschenOh es tut mir Leid ich hab zusätzlich noch eine Frage... & zwar hab ich gesehen, dass du in deinen Posts einzelne "Überschriften" hast, die auch nochmal unterstrichen sind. Wie machst du das? Danke vorab und schönes Wochenende <3
Wäre super Lieb.. vielen Dank :-*
Bei mir klappt es leider nicht. Und es ist seltsam... ich habe auch andere Tutorials von euch gemacht, die ich alle super fand. Und alle funktionierten bis zu dem Zeitpunkt als ich diese Kategorien unter meinen Header festlegte mit html usw. Plötzlich klappte sah man die Datums-bubble nicht mehr und auch einige andere Dinge waren weg. Woran kann das liegen?
AntwortenLöschenNachdem ich seit zwei Tagen leicht verzweifelt aufgegeben habe, habe ich es nun endlich geschafft. Der Grund: Falsch gelesen. Jetzt hat es aber alles geklappt & dank eurer Tutorials hat mein Blog ein neues Design (:
AntwortenLöschenhttp://bluemchenmohn.blogspot.de/
Danke, es hat geklappt. Ihr seit super:)
AntwortenLöschenAlles Liebe
Michelle
Die einzelnen Elemente bei mir abtrennen funktioniert, aber die Zeile allgemein ausrichten funktioniert bei mir nicht.
AntwortenLöschenIch benutze das "Einfach"-Template von Blogger.
Wenn ich das Tutorial durchführe funktioniert es nicht, sowieso funktioniert nie etwas, wenn ich dies über ]]> einfügen müsste.
Gibt es da irgendwie eine andere Lösung?
LG Josie ❤︎
Hallo Josie, wenn du Probleme hast, das CSS einzufügen, dann mach das einfach so:
LöschenFüge vor </body> folgendes ein:
<style>...</style>
Dazwischen (also statt den ...) kommt dann das CSS rein, was normalerweise über ]]> kommt. Sollte so auch funktionieren :)
Liebe Grüße, Mira
Funktioniert leider immernoch nicht :(
LöschenJuhuuu,es hat geklappt :-D DANKE für das coole Tutorial! Ich werd jetzt mal nach und nach mein Design etwas anpassen - deine Tipps sind da sehr hilfreich :-)
AntwortenLöschenAlles Liebe
Doris von
Pretty Clover Beautyblog
Hey! Der erste Teil von diesem Tutorial hat bei mir super funktioniert, war auch sehr leicht, weil das echt super erklärt wurde.
AntwortenLöschenLeider funktioniert die Abtrennung bei mir nicht. Ich habe das eigentlich so gemacht, wie du es oben geschrieben hast, aber irgendwas muss ich wohl doch falsch gemacht haben. ^^''
Mein Bloglink ist: http://wenn-ein-vollmond-schatten-wirft.blogspot.de/
Vielen Dank übrigens für die ganzen tollen Tutorials!
Die Anleitung ist super, nur leider fehlt bei mir der komplette Abschnitt für Post-Labels und ich weiß nicht, wie ich das dort hinein bekommen soll.
AntwortenLöschender Anfang mit <span class='post-labels> ist klar, aber was muss da dann noch rein?
Liebe Mira
AntwortenLöschenEine Frage auch von mir zu einem (glaube ich) verwandten Thema: Ich habe die Gadgets in der Sidebar unterstrichen - allerdings hat sich dadurch auch der Titel unterstrichen; mit dem Befehl border: none; geht er leider auch nicht weg (auch nicht mit border-bottom oder border-top) - eine Idee, wie es es anstellen könnte?
Und welche Frage mir am wichtigsten ist und ich einfach nirgends ins Antwort finde: Ist es möglich, sie Leiste mit den einzelnen Seiten (welche bei mir unterm header ist) über die gesamte Breite des Bildschirms anzuzeigen?? (Bsp: http://stout-blogger.blogspot.ch oder wie bei euch oben der schwarze Balken) ??? Ganz lieben Dank :))
Hey, ich weiß, dass hier lange nichts passiert ist, aber vielleicht kann mir hier jemand helfen. Bei mir hat alles super funktioniert, ich habe zwei Symbole eingefügt, die ich wollte. Das Problem ist bloß, dass ich in meiner Navigation auf Seiten verlinke (About, FAQ, etc) und nun auf diesen Seiten oben auch diese beiden Symbole auftauchen. Weiß jemand, wie ich den Code formulieren muss, damit das nicht mehr passiert?
AntwortenLöschenhttp://dalilaliving.blogspot.de/p/about-me.html
Hallo Mira!
AntwortenLöschenIch finde diese Art der Gestaltung des Post-Titels so schön und würde es auch sehr gerne in meine neues Blogdesign einbauen, nur leider finde ich noch nicht einmal diesen Code ]]> in meiner HTML Vorlage :(
Sehr schade... Wüsstest du vielleicht, wie ich dieses Problem beheben könnte/Was ich falsch gemacht habe?
Danke schon einmal im Voraus.
Liebe Grüße,
Tina
http://seifenblasentraeumereien.blogspot.de/
* ]]>
Löschennatürlich meinte ich den Code...
Dieser Kommentar wurde vom Autor entfernt.
AntwortenLöschen.post-header{
AntwortenLöschenbackground:#EAFFEA;
background:url() no-repeat;
text-align:center;
font-size:16px;
Funktioniert bei mir auch gar nicht. Keine Hintergrundfarbe, nichts. Zentriert ist es zwar schon, aber die Hintergrundfarbe bleibt transparent.
Die // Abschnitte gehen auch nicht, trotz dass sie passend gesetzt wurden. Aber das ist nicht so schlimm. Wichtiger wäre mir oben die Hintergrundfarbe. Falls es dazu bereits eine Lösung gibt, wäre ich dankbar. ;)
leider bekomme ich das datum nicht zentriert ...und auch die Abtrennung bekomme ich nicht hin:(
AntwortenLöschenwäre super lieb wenn du helfen könntest
liebst,
Eva von lecallofbeauty
Vielen lieben Dank für das Tutorial, bei mir sieht es nun etwas anders aus im HTML Code, die Abstände und Leerzeichen musste ich etwas verändern, um es zentrieren zu können, aber letztendlich hat es super funktioniert.
AntwortenLöschenDankeschön <3
Das Tutorial ist echt gut, nur leider funktioniert bei mir das mit dem Abtrennen nicht. Ich habe die Abtrennungen eingefügt und bin dann auf "Vorschau" gegangen und dann war alles wie vorher.
AntwortenLöschenWäre toll, wenn du das nochmal erklären könntest :). Dankeschön :).
Liebe Grüße
Mila
http://dashausderbuntenbuecher.blogspot.de/
Okay, es geht jetzt. Ich habs an der falschen Stelle einfügen wollen :D Nur jetzt sitzt halt der Zeitstempel so auf den Abtrennungen drauf...
LöschenOkay, da habe ich jetzt auch eine Lösung gefunden :). Tut mir leid, dass ich immer nerv :P
LöschenEure Tutorials sind megahammerspitzegut!