Wednesday, October 03, 2012

Put Date, Name and Comment Counts under Post Title

Wednesday, October 03, 2012

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 (1st url is for the image of author name 2nd url is for the image of date and 3rd 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.

16 comments:

  1. Superb explanation!

    Can you also share a little about how to show date on each post?

    ReplyDelete
    Replies
    1. Sure why not

      Let me get back to you with tweak in detail!

      Delete
  2. Thnx for the trick!

    ReplyDelete
  3. Hi, how do you put a timestamp? thanks! great tut! :)

    ReplyDelete
  4. Angel, 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.

    ReplyDelete
  5. so helpful! I just have one more quick question... is there another code to remove the comments at the bottom of the post now that its at the top like you made for the date? Thanks

    ReplyDelete
  6. I hope this is going to help you!

    http://ptetech.blogspot.com/2012/10/How-to-Apply-Remove-Disqus-2012-and-Avoid-Comments-Count-Override.html

    ReplyDelete
  7. i thought it worked until i noticed the new comments that was installed with your coding was gone as well. Any ideas?

    ReplyDelete
  8. Thank you so much. This is what I been looking for.

    ReplyDelete
  9. Wateen
    Wateen
    ary drama

    nice post and blog

    ReplyDelete
  10. Very good written article. It will be beneficial to anybody who utilizes
    it, including yours truly :). Keep up the good work - can’t wait to
    read more posts.

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...