Display Post Author, Date, Labels And Comments With Icons Below Post Titles - Helper Blogger

Blogger Widgets | Templates | Tutorials


Tuesday, 13 March 2012

Display Post Author, Date, Labels And Comments With Icons Below Post Titles

In this post, We will see you how to add default Author Name, Post Date, Labels and Comments with some little icons to the left of each other.This hack will perfectly match your blog design.When there are no comments posted,the comment link says 'Be the First to comment!' and when there is just one comment it says '1 comment so far'. This is a nice hack that will make your blog look beautiful and professional.I have kept the installation of this hack extremely easy.You just have to copy and paste the code.Now let's start to applying this hack.

(Note - For the purpose of preview I was added this hack,Now I have removed it.You can see the preview below in image)

How To Apply This Hack To Your Blog?

  • Go to Blogger Dashboard > Design > Edit HTML.
  • Backup/Download your template.
  • Tick expand widget templates check box.
  • Now search for <div class='post-header-line-1'>
  • Add below code just above <div class='post-header-line-1'>
( Note - If you can't find above code then find <div class='post-header'> )

<font style='background:transparent url(http://1.bp.blogspot.com/--fsYbwHKiKM/T0uOGw-hdTI/AAAAAAAAA-s/QBcDITiSCEs/s1600/author.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(http://3.bp.blogspot.com/-1MEONG9XUgA/T0uOF8ICEdI/AAAAAAAAA-k/VBwTnA8PXbI/s1600/clock_icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(http://4.bp.blogspot.com/-rg64gjlD5Q4/T0uOD1RiFKI/AAAAAAAAA-c/RF7cQMGyO_I/s1600/tag+icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'>
<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>
<span class='post-comment-link' style='Float:right;'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(http://4.bp.blogspot.com/-wGMp3jZ7DpU/T0uOrczut7I/AAAAAAAAA-0/F_BnJ5WS9BI/s1600/comment-icon.png) no-repeat;Padding-left:20px;'><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>

Customizations (Optional)

  • If you want to change AUTHOR icon then replace the code in RED with your own icon.
  • If you want to change DATE CLOCK icon then replace the code in BLUE with your own icon.
  • If you want to change TAG icon then replace the code in LIME with your own icon.
  • If you want to change COMMENT BUBBLE icon then replace the code in PURPLE with your own icon.

I hope this hack will surely help you to make your blog more beautiful and professional.
If you have any problem about this hack then surely ask me.I will respond you as soon as time allows.


  1. Sir I Dont get Any Output Plzzzzzz Help Me

  2. I wanted to remove labels and I have done considering the code.
    how can i show the date stamp instead of time stamp?????

    1. i think changing to will work....by the way great post Rahul :)

  3. thanks great post

  4. Hi I am honor of teachonly.com i got some thing new from ur blog thanks for sharing bro keep on

  5. Not working on my blog here http://qneblog.blogspot.com

    please help!



If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM