<i class="icon-code"></i> 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