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

Posted : Wednesday, May 11, 2011 | Post Author : Paul Crowe  | 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 16×16 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 + “?max-results=8″‘ rel=’tag’><data:label.name/></a>
<b:if cond=’data:label.isLast != “true”‘>|</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 16×16 pixels.

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

Drop Your Comments And Questions Below.

43 comments:

  1. LovefortechnologyMay 13, 2011 at 10:21 PM

    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

     

  5. Mansoor Ahmed MemonApril 17, 2014 at 7:43 AM

    @Except Nothing, do not leave black spaces while you search for the code

    Delete

  6.  

  7. @ 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

  8. nice! nice! i have several of your tips applied on my personal blog… thanks! High five! 😀

    ReplyDelete

  9. @ Orange – Great Glad You Liked It ! High Five Right Back.

    ReplyDelete

  10. Thank you so much! I’ve been waiting for this post and it works perfectly fine. 🙂

    ReplyDelete

  11. 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

  12. 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

  13. @ 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

  14. can i have code for edit post

    ReplyDelete

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

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

    ReplyDelete

  16. 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

  17. Great post! You’ve made life easier for everyone. Thanks.

    ReplyDelete

  18. this is perfect site

    ReplyDelete

  19. @ Viki – Thanks very much 😀

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

  22. tq… its working as simple as that… you’re the best

    ReplyDelete

  23. 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

  24. 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

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

    ReplyDelete

  26. Thanks! I implemented this on my blog.

    ReplyDelete

  27. ஆளுங்க (AALUNGA)February 11, 2012 at 5:49 AM

    Thank you very much!

    ReplyDelete

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

    ReplyDelete

  29. Web Design UdaipurApril 18, 2012 at 8:25 PM

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

    ReplyDelete

  30. Nguyễn Ngọc LiêmApril 20, 2012 at 7:42 AM

    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

     

  31. have you tick “Expand Template Widget”?

    Delete

  32.  

  33. Very nice.Thanks alot guys 😀

    ReplyDelete

  34. 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

  35. 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

  36. Thanks very much !
    Scandal 24h – Vietnam

    ReplyDelete

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

    ReplyDelete

  38. nice and very useful post .. thank you bro..
    Goforexam.in

    ReplyDelete

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

    ReplyDelete

     

    Replies

     

  40. 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

  41.  

  42. 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

  43. Hi-Tech Job VacanciesApril 22, 2013 at 6:15 AM

    Thanks alot…

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

  46. great work man thanks

    ReplyDelete