My Exchange Banner

create your own banner at mybannermaker.com!
Copy this code to your website to display this banner!

Outright online bookkeeping for just $9.99 / mo!

Saturday, May 14, 2011

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

Sulaiman Kamal | 12:19 PM | | Best Blogger Tips

Do You Like This Story?

On the recent post showing how toDisplay A Default Avatar For Anonymous Comments a comment by RedCheriiasked "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 Blogger dashboard click Design > Edit Html > Tick the Expand Widget Templates.

Design Edit Html Widget Templates

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

Recent Comments

Blogger Gadgets