How To Bring Timestamp, Author, Comment Count Below Post Title | Mission 15

Previously, we saw how to make the Blogger footer more professional and good looking. Today, we will how to bring the “Article Time-Stamp”, “Published by” and “Comments count” in one single line below the post title to make it look more organized. This post is a request from one my friend Anand. Hope this post will help him and many others who are new to Blogger.

Here, we will be removing the codes of time-stamp, posted by and comment count from the HTML template and bring them to one place; i.e. below the post titles for all the posts.

PREVIOUS MISSION – Mission 14: Restyling Blogger footer to make it professional.
NEXT MISSION – Mission 16: Enabling threaded comments for Blogger.

Before we go to the tutorial, just have a look at how this were looking in our previous design:
Here is the snapshot-

The “Time Stamp was above the post title”
The “Posted by author information and comment count were to the end of the article”.

MISSION 14 OBJECTIVES:

1) Bring the posted by author information below the post title.
2) Bring the article time-stamp below the post title.
3) Bring the comments count link below the post title and make it float to the right.
4) Make some space between the post title and the below created elements.
5) Draw a line below the post title.

Here is a snapshot of how it looks now:

EXPLANATION:

1) Bring the posted by author information below the post title

<b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
<data:post.author/>
        </b:if>

<div class='post'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title'>
     <b:if cond='data:post.link'>
       {<a expr:href='data:post.link'><data:post.title/></a>}
     <b:else/>
        <b:if cond='data:post.url'>
         {<a expr:href='data:post.url'><data:post.title/></a>}
        <b:else/>
          {<data:post.title/>}
        </b:if>
     </b:if>
      </h3>
    </b:if>


2) Bring the article time-stamp below the post title

The code for Article published time-stamp is:

<b:if cond='data:post.dateHeader'>
        <h2 class='date-header'><data:post.dateHeader/>
</b:if>

Paste that as well below the title code shown in the 1st demonstration.

3) Bring the comments count link below the post title and make it float to the right

The code for the comment count link is:

<b:if cond='data:post.allowComments'>
           <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='float:right;'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
          </b:if>

The code in RED above makes the comment link to float to the right.

THE FINAL CODE FOR THE THREE ELEMENT WOULD LOOK LIKE:

<!-- DATE LOOP, AUTHOR INFO AND COMMENT COUNT PASTED BELOW -->
<b:if cond='data:post.dateHeader'>
        <h2 class='date-header'><data:post.dateHeader/> | <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/> <data:post.author/>
        </b:if><b:if cond='data:post.allowComments'>
           <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='float:right;'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
          </b:if></h2>
      </b:if>
<!-- DATE LOOP, AUTHOR INFO AND COMMENT COUNT ENDS -->

4) Make some space between the post title and the below created elements

To increase the space between the post titles and the newly added elements, we need to define MARGIN for the post title.

Here is the CSS:

h3.post-title {
height:25px;
margin:0px 0px 6px 0px;
border-bottom:1px solid #aaa;
line-height:20px;
}

We have defined 6px as the bottom margin for the post title and the height of 25px overall for the post title. We have also added line-height for the text.

5) Draw a line below the post title

Within the same CSS for the post title, we will add the border bottom to draw the line:

h3.post-title {
height:25px;
margin:0px 0px 6px 0px;border-bottom:1px solid #aaa;
line-height:20px;
}

That’s it, you are done. Save the template and enjoy the new layout.

OTHER STYLING:

Comment count link has a new background and link color:

CSS:

a.comment-link {
/* ie5.0/win doesn't apply padding to inline elements,
so we hide these two declarations from it */
padding-left: 0px; background:#c7b5e6; color:#444;
}

Enjoy!!

— to be continued —