• RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Increase Website And Blog Traffic:latest article for Increasing Blog and website Traffic free gide.....
  • Create and Upload Site Map to Google:Google is fist largest Search Engine by upploading SITE MAP Google Easily Search Links from Ur site in Searching.......
  • Fix WEB SITE Errors:Google and other search engines always take those site in there fist page in searching which ha too less web Errors...
  • Top 20 Search Engine:Submit Ur site to top 20 Search Engines to Increasing Ur Site Traffic and making money top search engines like as Google, Yahoo, Ask, AOl, MSN...
  • Top Social Sites:Top 100 Social sites which real help U make a Affliate Marketer and in Pormoting ur Producdts...

New Posts

Display post author, date, labels and comments with icons below post titles

Posted by Mohsin On 2/27/2012 03:52:00 AM No comments

In this tutorial I will show you how to add more info on your Blogger posts like blog author's name, a time stamp for published posts, labels and comment count links. Firstly, let's see how the comments link behave - when there are no comments on your posts, there would be a link that says 'Be the First to comment!' and if your post gets one comment, it will appear as '1 comment so far'. On the left side, we'll see the blog author's name, a clock showing when posts have been published and finally, the post labels.
If you want to make your blog more eye-catching by adding these details with some cute small icons along with the Blogger Author's Name, Post Date, Labels and Comments... then follow these steps below.


Screenshot:
labels below blogger posts

How to Add Author, Date, Labels and Comment Bubbles to Blogger


Step 1. From your Blogger Dashboard, select your blog > go to Template > Edit HTML


Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the blogger' search box


Step 3. Type or paste the below code inside the search box in order to find it:
<div class='post-header-line-1'>
If you can't find the code above, look for this one:
    <div class='post-header'>
Step 4. After this code add the following HTML:
<div style="margin: 5px 0; border-bottom: 1px solid #F2F2F2;padding: 5px;"><font style='background:transparent url(http://4.bp.blogspot.com/-c1B11ScMq2g/UrceOVSjbxI/AAAAAAAAFnI/AfLfIudanZs/s1600/author.png) 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/-8zBVC26ojQE/UrcfeqmWuXI/AAAAAAAAFng/f_xOYkEhdVA/s1600/clock.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(http://2.bp.blogspot.com/-Zz2yZeaJG6U/UrcfOYO6_JI/AAAAAAAAFnY/1WHah9jzmhE/s1600/tag.png) 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(http://4.bp.blogspot.com/-rC0rrfpsbhE/UrcdZ37f_uI/AAAAAAAAFnA/ZIiB7SJgx0I/s1600/comment.png) no-repeat;padding-left:20px;font-size:11px;'><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></div>

How to customize:

If you want to change the icons, just replace the URL addresses in blue from above with your images URLs:

1. First one is the icon for the Author
2. 2nd one is the Clock icon
3. The 3rd one is the icon near the Labels
4. And the last one is for the comment bubble
    Step 5. Save template... and you're done!

    You might want to know how to add a comment bubble to your Blogger posts titles?

    0 comments:

    Post a Comment

    All types of Comments are welcome