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

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

Today i'am sharing a great post by Helper Blogger. Here is a great widget to show author name , time , label and a comment bar with icons just below your blogger post titles. 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'. Here we go :

Installing :

• Go To Blogger > Template > Edit HTML > Tick expand widget templates check box.

• Now search for <div class='post-header-line-1'> and just above it paste following code :

<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjavzoRG9bfyrjlRqJ-YEyq_E9VrXArh02J5-_Kb8Ks3jSRVE-e9Eg_gwUG0PjAP54kLQ9z8mJqF1zwkHX4gaMCp5yEChjTt1G5nCyNnyH-ry-san5I1-AeeqmH_YfL7S_aSBVoNG39D-U/s1600/author.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnuBIJuJnKzy9R9IkTwPmSS4X0_5txI0Xsy9Ixk-Cwq6A5dQjXeylNir6xumH1L62aEpYl-cazDM0naaRoLofzdm1XygHP0OOg8jFYTieaUx5XbWBiZ9LH98h-ozsqTPoGg8ZVuJR2j4U/s1600/clock-icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDhdzvktxmxLTbsOUvVsExq9HzYnFON7p8OzGwvD4WaUqmdNhdyItxsiG5zEgiijnWRCpbnqZY7Vturb4Xl96iA9N3QqwzAuazWu9JBHdBALwx90YFXrbwb-VoPgk1XNHzrXTVokmZ_hU/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>
</b:loop>
</b:if></font>
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-SZ6VJVZxY0nuGkWd1ezF5fF9s38C9wobjd8TBJMezWUjJ74Hr1WdOhhSzQRjYKJADrevDms8u42BUWEoo0ZB8DJ1XnJko5x69CYXdkpX3l85vo57wCEzjw2dCuxq7nO5vx7nYNvUQdo/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>
          </b:if>
        </b:if>
      </span>

Customizing :

•  You can change all icons of this widget and also text to display then there is one or zero comments.

Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.