{Tutorial} Footerlinks unter Posttitel (Kommentare, Label, usw...)

Dienstag, 11. August 2015


Ihr kennt es ja so wie es normal aussieht:

Öde und langweilig. Wenn ihr eure Footerlinks wie oben auf dem Bild unter dem Post-Titel haben möchtest, macht einfach folgende Schritte:

Geht ins HTML und sucht mit STRG + F nach:
<title><data:blog.pageTitle/></title>

Über diesen kleinen Code fügt ihr folgendes ein:
<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css' rel='stylesheet'/>

 Danach sucht ihr nach:
<b:if cond='data:post.dateHeader'>
 
Es werden euch nun mehre Ergebnisse angezeigt, aber das was wir suchen sieht so aus (und ist meistens das erste Ergebnis):
Das rot markierte müsst ihr löschen.

Jetzt sucht danach:
<div class='post-header'>

Über diesen fügt ihr nun folgendes ein:
<div class='undertitle'>
<i class='icon-user'></i> <data:post.author/> |  <i class='icon-calendar'></i> <data:post.date/> <b:if cond='data:post.labels'>| <i class='icon-tags'></i>
   <b:loop values='data:post.labels' var='label'>
   <a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'> <data:label.name/></a>
              <b:if cond='data:label.isLast != &quot;true&quot;'>/</b:if>
   </b:loop>
   </b:if>
| <span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.allowComments'><i class='icon-comments'></i>
            <a class='comment-link_top' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>Kommentieren<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Kommentar <b:else/><data:post.numComments/> Kommentare </b:if> </b:if></a>
          </b:if>
        </b:if>
            </span></div>

Wenn ihr keine Label unter dem Post-Titel haben wollt, löscht den roten Code raus!

Geht jetzt auf Vorlage -> Anpassen -> Erweitert -> CSS hinzufügen.
Dort fügt ihr nun folgendes ein:
.undertitle{
width: 100%;
text-align: center;
border-top: 2px solid #000;
font-size: 13px;
margin-top: 3px;
padding-top: 3px;
}
.comment-link{
display: none;
}

Wenn ihr die Leiste rechts oder links haben wollt, ändert das center zu left oder right!

Dieser Code macht, das ihr eine kleine Linie unter dem Posttitel habt. Bei 2px müsst ihr die Zahl ändern, wenn ihr den Strich dicker oder dünner haben wollt. Solid ist, wenn es eine vollkommende Linie ist. Möchtet ihr sie gestrichelt haben ersetzt solid durch dashed, oder wenn ihr sie gepunktet haben wollt durch dotted. #000 gibt dem Strich die Farbe. Hier könnt ihr euch eine andere raussuchen.

Dieser Code gibt die Schriftgröße an. Wenn ihr eine größere oder kleinere Schrift haben wollt, ändert das 13px in eure gewünschte Zahl.

Diesen beiden Codes geben dem Abstand zwischen Strich und der Leiste mit dem Footerlinks. Verändert die Zahlen wenn ihr einen größeren oder kleineren Abstand haben wollt.

Wenn ihr es nun geschafft habt, und die ganzen Post-Footer-Links unter dem Post-Titel habt, gibt es für sie unten im Post-Footer ja eigentlich garkeine verwendung mehr, richtig? Wenn ihr also die Footer-Links nicht doppelt, im Footer und unterm Post-Titel haben wollt, befolgt DIESES Tutorial.

Kommentare:

  1. Hey Ines,
    Wie ich dir schon geschrieben hab hätte ich die Icons gern in einer anderen Farbe, kriegs aber nicht gebacken. Hast du eine Idee?
    Und (Achtung spezial): Ich weiß es ist eine winzige Kleinigkeit, aber mir gefällt einfach die Anordnung der Labels mit den Schrägstrichen nicht. Ich hätte es gern so, wie die Labels eigentlich im Footer aussehen: Labels: Rezension, 4 Sterne, Bla - also mit normalen Beistrichen. Die Schrägstriche hab ich schon durch Beistriche getauscht, aber ich finde die automatischen Leerzeichen vor UND nach jedem Beistrich einfach hässlich. Auch hier eine Idee?

    Bitte um Rückmeldung ^^

    AntwortenLöschen
  2. Ich habe das alles so gemacht,
    aber es ist nichts auf meinem Blog passiert, außer, dass der Posttitel weiß wird wenn man mit dem Mauszeiger auf ihn kommt. Kannst du mir vielleicht helfen?♥

    Alles Liebe, Lea
    von ▲REMEMBER

    AntwortenLöschen
    Antworten
    1. Leider weiß ich nicht was da passiert ist, kan es sein das du die dynamische Vorlage hast?

      Löschen
    2. Danke für deine Antwort, aber ich benutze keine dynamische Vorlage, und es klappt auch nach dem zweiten Versuch noch nicht!
      Naja, trotzdem danke♥

      Alles Liebe, Lea

      Löschen
    3. Es könnte sein das du den Code an der falschen Stelle eingefügt hast. Oft gibt es ja mehrere verschiedene wo man das einsetzen könnte und die auch per Suche gefunden werden. Hast du es mal mit einer anderen Stelle versucht?

      Löschen
  3. Hey Ines, ich überarbeite gerade mein Design und habe dein Tutorial gerade auf einem Testblog ausprobiert, es ist jedoch rein gar nichts passiert, obwohl ich die einzelne Schritte genauso durchgeführt habe.
    Weißt du an was das liegen könnte? Ich verwende übrigens keine dynamische Vorlage.

    Liebe Grüße :)
    Christina von http://ufer-los.blogspot.de/

    AntwortenLöschen
    Antworten
    1. Kann dran liegen das du es nicht an der richtigen Stelle eingefügt hast, hatte ich auch mal als ich ein Blogdesign gemacht habe :)

      Löschen
  4. Liebe Ines,

    eine super Erklärung!
    Der Frühjahrsputz auf dem Blog ist gelungen und die neue Anzeige gefällt mir oben deutlich besser als unten. :)

    Eine Frage habe ich, vielleicht kannst du mir helfen. Ich habe es schon vergeblich versucht, dass ich gerne "Labels:" vor den Labels stehen hätte. Nur die richtige Stelle noch nicht gefunden.

    Vielen Dank & liebe Grüße
    Maria

    AntwortenLöschen
    Antworten
    1. Ich würde einfach nach dem zweiten von diesen Strichen hier: |
      Labels: hinschreiben, bevor die Klammer beginnt :)

      Löschen