Put Date, Name and Comment Counts under Post Title

With my recent post about how to put social icons and other stuff under post title. I have recently spent a pretty much time on searching a tweak for putting author name, date, labels and comments counter just under post title. Actually it took me over 30 hours to be exact; however finally I have it on my fingertips. I gave me about a couple of other very useful tweaks like how to change the font color and size in different parts of the blog (sidebar, main body, header h1, and sidebar h2) and some others while searching for this specific one. 

This tweak will ultimately help you customize your blog about following topics:

• Change date position in blogger
• Re position date under post title
• How to remove date header
• Put author name and date under post title
• How to put comment counter under post title
• How to put labels under post title 
• Customize color and font of date under post title

By default blogger does not offer the re position of date header and therefore we have to do it manually. Date looks very appealing to me just under the post title only with author name and comments counter. If you wish to add labels as well under post title, let me know so that I can share that code too so that you can just make an addition to existing one.

As always make sure to back up your template and follow below mentioned instructions:

1.            Go to Blogger Dashboard > Design > Edit HTML > Tick expand widget templates check box

2.            Now search one of these following codes

3.            <div class='post-header-line-1'> or <div class='post-header'>

4.            Add below code just above one of these lines (<div class='post-header-line-1'> /  <div class='post-header'>

<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYN1NWNqF75j724tpp3420O2h_PqF3zvIVGmn8rCsSbapdXvG0uXl-wWkadT-5MuL4StNv1MQM4fSfDPVD5k3EZZKEuc1H6XlZ9lqiXEQhji3YdbYVYe87Uob5aVWffQg4GoJwv_pZNKzz/s1600/author.gif) no-repeat scroll top left;padding-left:25px;font-size:14px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpHeAig0BO6VE7_MzJ_lURg0sP-UNqefj4YuZ3TlNIFZHJL9W1dczcjZTF8h0F6K3Q9TBNkmbXp4PZDEYbjXdXhmKlNlKHOJZMLEQr9e7eR2tGGdR1mkncYeekyl8E0wiCklLsCYGjZJJ/s1600/clock_icon.gif) no-repeat scroll top left;padding-left:25px;font-size:14px;'><data:post.dateHeader/></font>

<span class='post-comment-link' style='Float:right;'>

            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ek5kTl0eouttRb0glBpFqWA6A3dEA8_utkfVdTaZKKeiOnSvJd41zUHwZnp-3k2F6P5P24noLv_lJ_tyjnyBN6kZo1vTF-0zMm6pOvin4LQemdMsuCYgYdRWrPMku6JvVmT1SKiNilMY/s1600/comment-icon.png) no-repeat scroll top left;padding-left:25px;font-size:14px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>

               </span>

For Customization you can change the images with author name, date and comments counter by changing the url of your own choice by just replacing url’s in brackets (1^st url is for the image of author name 2^nd url is for the image of date and 3^rd url is for the image of comments counter)  with the url’s of images you want. You can also change the size of the font by just changing the pixels of your choice. If you wish to put the time stamp as well you can add it or if you want you can put time stamp only by changing text dateheader with timestamp.

Once done apply the changes to template. For those of you who wish to remove the date header which appears above the post title; Here’s how we do it.

Go to blogger dashboard, template, customization, advanced and add CSS code as follows:

h2.date-header {

margin:1.5em 0 .5em;

opacity:0.0;

}

Press enter after bracket, apply template and have fun.