Wie füge ich eine Trennlinie zwischen den Posts ein

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Wie füge ich eine Trennlinie zwischen den Posts ein

Beitrag von Seelchen am Do Feb 09, 2012 4:19 am

Dann wollen wir mal anfangen, unseren Blog von Grund auf unseren Wünschen entsprechend zu gestalten. Um das so tun zu können, dass ich euch jeden Schritt vernünftig erklären kann, habe ich einen Testblog angelegt und mir die Einfach-Vorlage von Blogger als Design ausgesucht. Während wir hier die verschiedensten Bearbeitungen vornehmen werden, wird diese simple Vorlage mehr und mehr etwas ganz eigenem und am Ende haben wir dann ein Layout, dessen Code wir (sollten wir das wünschen) herunterladen und auf unseren eigenen Blog hochladen können.

Unser Ausgangspunkt:


Starten werden wir mit etwas, das man in nur wenigen Schritten schnell umsetzen kann: Eine Trennlinie zwischen den Posts platzieren.

Als allererstes braucht ihr dafür eine Grafik, die die Linie, die ihr haben wollt, darstellt. Diese könnt ihr euch auf einer der Seiten suchen, die kostenlose Grafiken bereitstellen, oder aber ihr fertig selbst eine an. Dabei solltet ihr jedoch darauf achten, dass eure Trennlinie nicht breiter ist, als der Postbereich eures Blogs.


Für unser Beispiel habe ich mir schnell eine eigene Trennlinie gebastelt, die wir nun in den Blog einbauen werden. Dafür gehe ich als allererstes zu imageshak, photobucket, tinyPic oder irgendein anderen Hostinganbieter und lade meine Grafik hoch und nehme mir den Direktlink zu meinem Bild:

http://img26.imageshack.us/img26/2686/trennlinieu.png

Jetzt geht es ans Eingemachte, die Bearbeitung unseres html-codes. Um dahin zu gelangen, geht ihr auf Dashboard / Vorlage / html bearbeiten.
Jetzt suchen wir mit Hilfe von strg+F diese Stelle im Code:

Code:
.post {
  margin: 0 0 $(post.margin.bottom) 0;
}

Wenn ihr die gefunden habt, ersetzt ihr diesen Teil:

Code:
  margin: 0 0 $(post.margin.bottom) 0;
}

durch folgenden Code: (Achtung, der hier angegebene Link ist der von meiner Trennlinie. Den müsst ihr ggf durch den Link zu der von euch gewünschten Grafik ersetzen.)

Code:
background: url(http://img26.imageshack.us/img26/2686/trennlinieu.png);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
border-bottom:0px dotted;
padding-bottom:3.5em;
}

Nun klickt auf Vorschau und guckt euch an, was ihr gemacht habt. Wenn euch das Ergebnis gefällt, speichert ihr jetzt die Vorlage ab. Solltet ihr noch ein bisschen an der Höhe eurer Trennlinie rumspielen wollen, könnt ihr das hier tun: padding-bottom:3.5em


Viel Spaß beim ausprobieren! Very Happy


avatar
Seelchen
Admin

Anzahl der Beiträge : 187
Anmeldedatum : 07.02.12

http://buecher-seele.blogspot.com

Nach oben Nach unten

Re: Wie füge ich eine Trennlinie zwischen den Posts ein

Beitrag von Anorielt am Do Feb 09, 2012 6:35 am

Mich würde viel mehr interessieren wie ich eine Trennlinie IM Post hinkriege. Ich weiß, dafür gibts nen Button, aber der funktioniert bei mir irgendwie nicht.
avatar
Anorielt

Anzahl der Beiträge : 35
Anmeldedatum : 08.02.12
Alter : 27

Nach oben Nach unten

Re: Wie füge ich eine Trennlinie zwischen den Posts ein

Beitrag von Seelchen am Do Feb 09, 2012 6:42 am

Was genau meinst du mit "Trennlinie im Post"? So ewas:

____________________________________________________

Oder diese Trennung, die dann den Weiterlesen-Link im Post erzeugt?
avatar
Seelchen
Admin

Anzahl der Beiträge : 187
Anmeldedatum : 07.02.12

http://buecher-seele.blogspot.com

Nach oben Nach unten

Re: Wie füge ich eine Trennlinie zwischen den Posts ein

Beitrag von Anorielt am Do Feb 09, 2012 7:45 am

Nein, genau die Trennlinie. Bei mir funktioniert das in den Blog Posts nicht. Wobei deine jetzt eher so aussieht als hättest du die mit

_________________________________________

gemacht? Bei Blogger gibts aber die Option Jumb Break einzufügen und das funktioniert bei mir eben nie.
avatar
Anorielt

Anzahl der Beiträge : 35
Anmeldedatum : 08.02.12
Alter : 27

Nach oben Nach unten

Re: Wie füge ich eine Trennlinie zwischen den Posts ein

Beitrag von Seelchen am Do Feb 09, 2012 7:53 am

Jump Break erzeugt aber keine Trennlinie, sondern einfach nur eine Unterbrechung des Posts. Sprich, du siehst auf der Hauptseite einen Teil deines Beitrags und an der Stelle, wo du Jump Break eingefügt hast, sieht der Leser nur "Hier klicken zum Weiterlesen (oder ähnlicher Text). Smile

Wenn Jump Break bei dir nicht geht, du es aber dennoch nutzen möchtest, kannst in deinem Texteditor alternativ auch kurz auf die html-Ansicht wechseln und dort dann manuell an der Stelle einfügen, an der du den "Weiterlesen" Link später haben möchtest. Smile
avatar
Seelchen
Admin

Anzahl der Beiträge : 187
Anmeldedatum : 07.02.12

http://buecher-seele.blogspot.com

Nach oben Nach unten

Re: Wie füge ich eine Trennlinie zwischen den Posts ein

Beitrag von Mikage am Do Feb 09, 2012 8:07 am

Huhu^^
Eine einfache Linie kann man mit dem html Befehl "hr" einfügen.
Aber Jump Break ist das wie Seelchen schon sagte nicht^^
avatar
Mikage

Anzahl der Beiträge : 1
Anmeldedatum : 08.02.12

Nach oben Nach unten

Re: Wie füge ich eine Trennlinie zwischen den Posts ein

Beitrag von Anorielt am Do Feb 09, 2012 8:34 am

hr? Wo und wie muss man das denn einfügen um eine Trennlinie zu bekommen?

@Seelchen: Ahhh, wieder ein wenig schlauer, danke dir Smile Dann habe ich das wohl verwechselst, erklärt auch weshalb ich dann nie eine Trennlinie bekommen habe
avatar
Anorielt

Anzahl der Beiträge : 35
Anmeldedatum : 08.02.12
Alter : 27

Nach oben Nach unten

Re: Wie füge ich eine Trennlinie zwischen den Posts ein

Beitrag von Seelchen am Do Feb 09, 2012 8:36 am

Nichts zu danken! Very Happy
Bei hr handelt es sich um einen Befehl, den du ebenfalls in der html-Ansicht deines Texteditors eingibst. Das Ganze muss dann so aussehen:
. Wenn du dann wieder zurück auf "Verfassen" wechselst, siehst du eine schwarze Trennlinie. Smile
avatar
Seelchen
Admin

Anzahl der Beiträge : 187
Anmeldedatum : 07.02.12

http://buecher-seele.blogspot.com

Nach oben Nach unten

Re: Wie füge ich eine Trennlinie zwischen den Posts ein

Beitrag von nyancore am So März 18, 2012 2:32 pm

Find diese Stellen bei mir nicht T_T
avatar
nyancore

Anzahl der Beiträge : 42
Anmeldedatum : 25.02.12
Alter : 28

http://cupcatz.blogspot.com

Nach oben Nach unten

Re: Wie füge ich eine Trennlinie zwischen den Posts ein

Beitrag von Seelchen am So Apr 01, 2012 10:07 pm

Magst du deinen html-code hier mal posten oder mir per PN schicken? Dann schaue ich mal nach, wo bei dir die richtige Stelle ist! Smile
avatar
Seelchen
Admin

Anzahl der Beiträge : 187
Anmeldedatum : 07.02.12

http://buecher-seele.blogspot.com

Nach oben Nach unten

Re: Wie füge ich eine Trennlinie zwischen den Posts ein

Beitrag von Gesponserte Inhalte


Gesponserte Inhalte


Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben

- Ähnliche Themen

 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten