Be KreaTief

Author, Date, Labels and Comments under Post Title ✤✤

Man sieht es oft auf Blogs. Das Datum under dem Posttitel. Dazu habe ich bereits einen Post gemacht (hier), doch warum nur das Datum? Warum nicht auch die Kommentare, wer den Post verfasst hat und Labels. Optisch wirkt es schlank und was im Post-Footer unorganisiert wirkt, bekommt dadurch plötzlich Ordnung. Wie ihr so eine UnterPostTitelInforBar bekommt, zeige ich euch jetzt.

It's become a pretty common view: the date under the post title. I already made a tutorial 'bout that (here), but why only show the date? why not comments, author and labels as well? The look of it is sleek and instead of having it chaotically in the post footer this under-post-title-info-bar adds elegance and order to your blog. Let's get started.



Okay, wie ihr sehen könnt habt ihr kleine Icons vor den einzelnen Informationen, und die Kommentaranzeige passt sich der Anzahl an. Es gibt einen Text, wenns keine Kommentare hat, einen wenn ein Kommentar dasteht und einen, wenn mehr als ein Kommentar existiert. Bevor wir allerdings zum Code kommen, müssen wir meinen absoluten Liebling in unseren Blog einfügen. Die Icons stammen von einem Icon-Font, der die gnazen mühsamen icon-bilder ersetzt. Font-Awesome.

Okay, how you can see the info bar has little icons to indicate what kind of information you're looking at. And the comment-link is dynamic. there's a text for thre cases. No comments, 1 comment and 1+ comments. :)
But before we come to our code, we have to implement my favourite thing ever. Font Aweseome. It's an icon-font, which puts the trouble of finding tiny icon pics into the past.


Font Awesome

Okay. Ab ins HTML und dort folgendes ins Suchfeld eingeben

Okay, go into your HTML and search the following
<title><data:blog.pageTitle/></title>

Über diesem Titel, fügt ihr nun folgendes ein und ihr könnt Font Awesome benutzen!

Above that title, paste this snippet and you're able to use Font Awesome
<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css' rel='stylesheet'/>

HTML

Bevor wir jetzt unsere Bar einfügen, müssen wir das alte Datum löschen. Dazu sucht ihr nach

Before we add our bar, we have to remove the old date. For that just search for:
<b:if cond='data:post.dateHeader'>

Dies ist die erste Zeile eines kleinen Blocks

That's the first line of a little paragraph.
<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

Diesen löschen wir.

Delete it.

Als nächstes suchen wir diese Zeile. Diese findet ihr zwei Mal.. Wir brauchen das zweite Ergebnis.

Next search for this line. You're gonna find it twice. You need the second result.

<div class='post-header'>

Über dem eben gesuchten, kommt nun der Code für die Bar, der so aussieht.

Above this you're gonna paste the bar. The code is as follows
For the english speaking. Change the comment text. "Kommentieren" is the text if no comment has been added so far. "Kommentar" is the text if one comment's here and "Kommentare" ist the text for everything with more than one comment.


<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>

CSS

Kommen wir zur CSS diese wie immer über den Vorlagendesigner oder oberhalb von ]]></b:skin> einfügen.
Diese CSS fügt eine 2px dicke Linie ein, die die Farbe eurer Links hat. Das könnt ihr allerdings selbst ändern. Weiter verstecken wir den alten Kommentar-link im Post-footer.

Now for the CSS. As allways place it into the template designer or above ]]></b:skin> in the HTML.
The CSS adds a 2px thick line in the color of your links to the bar, you can change that, if you want tot. Furthermore, we're hiding the old comment-link from the post footer.


.undertitle{
width: 100%;
text-align: right;
border-top: 2px solid $(link.color);
font-size: 11px;
margin-top: 3px;
padding-top: 3px;
}
.comment-link{
display: none;
}

Remove on static page

Da diese Linie auch auf statischen Seiten angezeigt wird, und es dort nicht wirklich von Nöten ist, könnt ihr das ganz einfach mit folgendem Verfahren entfernen.

This bar is gonna show on static pages as well. Since I don't really think it's necessary there you can remove it like that.

Sucht nach

Search for

</head>

Und unterhalb davon fügt ihr folgendes ein.

And underneath it, paste this snippet.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
 <style>
      .undertitle{ display: none;}
  </style>
</b:if>

Und das war's. :) Hoffe es gefällt euch :D

And that's it. Hope you like it :D
edit

17 comments:

  1. Ich habe schon so lange nach so etwas gesucht. Alle anderen Tutorials haben nicht geklappt und jetzt funktioniert einfach alles einwandfrei. Vielen Dank!

    ReplyDelete
  2. Hi. Habe dieses Tutorial auf meinem Template, welches Ich von deinem Responsive Template - Tutorial erstellt habe angewandt. Aber komischerweise werden die Labels doppelt angezeigt. - Auch wenn Ich im Postbereich die Labels ausschalte. Weißt du wieso?

    ReplyDelete
    Replies
    1. Wo werden die Labels doppelt angezeigt?
      Einmal in der Leiste und einmal unterhalb der Posts oder zweimal in der Leiste?

      Delete
    2. Einmal in der Liste und unterhalb des Posts. - Obwohl Ich sie auch schon ausgeschaltet habe. Beides - an und aus - bringt nichts. :o Der Link http://richtigesblogdesign.blogspot.de/

      Delete
    3. Such mal in deinem Code nach Labels: und sieh dir an, ob du neben dem BarCode auch noch ein anderes Ergebnis bekommst. Versuch mal das auszuklammern.

      Delete
    4. Perfekt,Danke. ♥

      Delete
  3. Total gutes Tutorial, hat mir sehr geholfen. Vielen Dank :)

    ReplyDelete
  4. Super! Vielen, vielen Dank, hat perfekt geklappt. Ich wollte nur die Kommentare, und die nummeriert... ;D
    Wunderbar erklärt und alles!

    Alles Liebe,
    mara <3

    maristicated.blogspot.ch

    ReplyDelete
  5. Super! Tolles Tutorial, hat alles super funktioniert!
    Ich habe aber nur die Kommentare verwendet... :) Und diese nummeriert
    Aber es bleibt bei mir immer auf der linken Seite,, und ich möchte es eigentlich gerne rechts haben... :// Kannst du mir da irgendwie helfen? ich habe dieses 'text-align: right;' so gelassen und bei deinem Beispiel ist es ja auch perfekt... :)

    Alles Liebe,
    mara <3

    PS: Falls du mal schauen möchtest: maristicated.blogspot.com

    ReplyDelete
  6. Danke, Danke, Danke für dieses verständliche und einfache Tutorial!
    Ich habe das Ganze (zumindest zum größten Teil) in meinen Post-Footer eingebaut und bin hochzufrieden.
    Als CSS-DAU muß ich immer auf verfügbare Bausteine zurückgreifen, um meinen Blog (http://frauvau.blogspot.com) ein bißchen aufzuhübschen. Nach einer langen Pause möchte ich vor dem Wiedereinstieg ein bißchen Frühjahrsputz betreiben. ;)
    Nochmals Dankeschön!

    ReplyDelete
  7. ich würde gern nur meine labels unter den post titel setzen..

    ReplyDelete
  8. Erst einmal tausend DANK, dass Du Dir die Mühe gemacht hast!
    Ich habe nun seit ungefähr 2 Stunden zig andere Variationen benutzt und keine hat geholfen. Bis auf deine. :)
    Allerdings habe ich dennoch eine Frage: Wie bekomme ich die Kommentare nun unter den Posts weg? Die sind da nämlich leider noch immer.
    Habe schon herumprobiert, aber die Antwort noch nicht gefunden, nur wie ich die Labels entfernen kann (was ich auch gemacht habe).
    Hoffe, Du kannst mir die Antwort geben. :)

    Danke im Voraus!
    Liebe Grüße
    Lily

    ReplyDelete
  9. Tut mir leid, wenn ich abermals schreibe, aber ich habe die Lösung nun gefunden. Allerdings gibt es nun ein anderes Problem: Egal was ich nun im HTML ändere, setzt nun dauerhaft einen langen Strich unter meinen Posttitel. :(
    Weißt Du, wie ich das wieder loswerde?

    ReplyDelete
  10. Tolle Sache! Danke für dieses großartige Tutorial!

    ReplyDelete
  11. Hey, hat alles super geklappt, allerdings ist 1. das Ganze nicht zentreirt, wie ich es gerne hätte und 2. der Kommentarlink im Footer immer noch da...
    Bloglink: http://simply-original.blogspot.de/

    ReplyDelete
  12. vielen dank für dieses tolle tutorial! ich habe es getestet und bei mir hat es sehr gut funktioniert, bis auf die tatsache, dass ich die labels jetzt sowohl unter dem posttitel als auch im post-footer, in dem sie ursprünglich angezeigt werden sollten, vorfinde.. wie kann ich das beheben?

    lg
    Angy von Upside Down Kingdom

    ReplyDelete
  13. Das Ergebnis ist klasse. Ein tolles Tutorial - danach habe ich lange gesucht! :)

    ReplyDelete

Fragen, Feedback oder anderes, was du loswerden willst?
Kommentiere über das alte Kommentarsystem (check wieder vorbei um zu sehen, ob ich geantwortet habe) oder G+

Questiosn, Feedback or something else you want to tell me?
Comment using the old system or G+ and make sure to check back to see if I answered