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




| 43 comments

On the recent post showing how to Display A Default Avatar For Anonymous Comments a comment by RedCherii asked "How do you put those little icons beside your post details (author, date, label) and make them appear below your post title?".The icons and details RedCherii asked about can be seen below the title of this and every post on Spice Up Your Blog.So for Redcherri and anyone else who likes them, in this post i will show you how to add them to your blog.What we are adding is the default Author Name, Post Date And Labels from the post with 16x16 icons to the left of each.I also have a pipe character splitting each, the code will be placed in your template to display this directly below the post titles.

Add Author, Date And Labels With Icons Below Posts Titles

Step 1. In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed > Tick The Expand Widget Templates Box as shown in the video Below :

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Use Search Bar)

<div class='post-header-line-1'>

Step 3. Copy and paste the following code Directly Below <div class='post-header-line-1'>

<font style='background:transparent url(http://2.bp.blogspot.com/_rKG-ziTSNUQ/TLeqM1nMUqI/AAAAAAAABwo/chgv1QmlXaA/s1600/author.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(http://4.bp.blogspot.com/_rKG-ziTSNUQ/TLeq1id8TfI/AAAAAAAABws/O0FUgG1IqJ0/s1600/calendar.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(http://3.bp.blogspot.com/_rKG-ziTSNUQ/TLeraxpOcoI/AAAAAAAABww/yVGb8J9bvJI/s1600/icon_tags.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><a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a>

Yellow - Author Icon
Red - Calender Icon
Blue - Labels Icon

Optional Change The Icons - The icons are highlighted in the code and you can change these by replacing the image URL.The icon you replace them with should be 16x16 pixels.

Step 4. Save your template, how easy was that.

Drop Your Comments And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

43 comments:

  1. Very good article thanks works perfectly

    ReplyDelete
  2. Yeah! your blog is the blog that I MUST check everytime you post a new thing coz i know it will be super AWESOME!

    ReplyDelete
  3. i can't find this code'div class='post-header-line-1'
    '. What to do?

    Thanks
    Hari (http://hari11888.blogspot.com)

    ReplyDelete
  4. I could not find step 2 code in my template . www.exceptnothing.com

    ReplyDelete
    Replies
    1. @Except Nothing, do not leave black spaces while you search for the code

      Delete
  5. @ Hari & Except Nothing - Make sure you have the expand widget templates box clicked.If you still cant find it your code could be slightly different, use Ctrl f for the search bar and just look for : line-1 .You should find a snippet of code very similar to the one in the post.

    ReplyDelete
  6. nice! nice! i have several of your tips applied on my personal blog... thanks! High five! :D

    ReplyDelete
  7. @ Orange - Great Glad You Liked It ! High Five Right Back.

    ReplyDelete
  8. Thank you so much! I've been waiting for this post and it works perfectly fine. :)

    ReplyDelete
  9. I got it Thanks and published. Thanks.

    I like to add at end of the post. is possible to add?

    Regards
    Hari(http://hari11888.blogspot.com)

    ReplyDelete
  10. Using this features i added wonderful label in my every post. So i like to remove the labels present at end of the each post. Tell me how to remove this.

    Thanks in advance.

    Hari

    ReplyDelete
  11. @ Hari - In general the info below the posts will be below the post footer, find the tag including 'post-footer-line-1' and it will be below that.

    ReplyDelete
  12. can i have code for edit post

    ReplyDelete
  13. @ Paul Crowe: Thanks Friend. Works properly.
    Added at end of post.

    Regards
    Hari (http://hari11888.blogspot.com)

    ReplyDelete
  14. I really liked the labels design so I just added that one to the footer of each post. Now I cannot remove the labels that come with the blog. I went into the Design tab, clicked to edit the blog posts area, deselected the labels, and clicked save. Nothing changed. I tried in the html coding beneath where I added the code but I keep getting errors each time with div, a, span closing errors. I am having trouble and wondering if you could help point me in the right direction.

    ReplyDelete
  15. Great post! You've made life easier for everyone. Thanks.

    ReplyDelete
  16. wow ,,,This is awesome, keep up the good work paul.. This is the best i have seen so far.

    ReplyDelete
  17. I just noticed in my blog, it is showed the time instead of date. Why is that?

    ReplyDelete
  18. tq... its working as simple as that... you're the best

    ReplyDelete
  19. Hello I try your code and placed it were it suppose to go but! it does not have the correct date....It have the 7th is there something I should do to correct this...

    ReplyDelete
  20. Very cool, I love this stuff! Have to say though my date was 'dated' as well and the icons were different than the ones pictured in your post. Could this be because I'm on a Mac ? Found the search bar OK.

    Since the icons were different I searched for some new ones and tried uploading those by creating a post on blogger without actually publishing the post (found this tip on another tut) but did not get the code correct. Will try again.

    Any ideas though for the two problems I encountered here. There are countless icons on the web - would love to make this work. Love your site and will be following it for more great tutorials : D

    ReplyDelete
  21. awesome! thanks dude! works great. i like the icon beside the author time stamp and label.

    ReplyDelete
  22. Thanks! I implemented this on my blog.

    ReplyDelete
  23. thank you very much! It works great! Is it possible to display that from my static pages in blogger?

    ReplyDelete
  24. hi i'm do as same but it show this i want below main heading my url is http://bhagwatilal.blogspot.in/

    ReplyDelete
  25. Hi! I couldn't do it as you show. I didn't find it in my template. hu! hu!

    !>
    !>
    !>

    Anyway thank for your post.

    ReplyDelete
    Replies
    1. have you tick "Expand Template Widget"?

      Delete
  26. Very nice.Thanks alot guys :D

    ReplyDelete
  27. THanks for the post ,,I wanted to add label just after the title and as you said..i tried..it worked really nice for me
    thanks buddy

    ReplyDelete
  28. I´m trying here but i want to have it like this blog www.juststyle.blogg.se do you know ho to do that? I have been trying for weeks now... please help me! :) Thanks! / Fiffi

    ReplyDelete
  29. you were rocking paul, great post and i need more new posts like this

    ReplyDelete
  30. nice and very useful post .. thank you bro..
    Goforexam.in

    ReplyDelete
  31. it displays the time instead of date, why is that?

    ReplyDelete
    Replies
    1. Ahmed you need to change this in your settings.Go to your settings and under 'Other' you will see the option to change the date and timestamp format..

      Delete
  32. THanks for the post ,,I wanted to add label just after the title and as you said..i tried..it worked really nice for me

    ReplyDelete
  33. Thanks it worked.It would be better if you show just the name instead of the icon.
    like Author:Paul Crowe

    ReplyDelete
  34. I dont want the icon, how do I get the stuff to show below the title without the icon?

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us