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

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

    1.Go to Blogger Dashboard --> Design --> Edit HTML

    2.Backup your Template before making any changes to your blog

    3.Now Expand Widget Templates

    4.Find the code shown below using [ctrl+F]

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

Copy and paste the following code Directly Below Find the Code

<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNR9Qco8cr9gsZW_g6DDrfpQ7RCeSeawB1r3HQ8PDrW9Yixk8UJhGQ432ONU5j42JqzzMWNXk23R9e5Jv5jVPaU4bbiMOH9dC_2d4kKin2HTwHnastMuuEm3agbsMDohjEybISYcPqHsw/s1600/author.png) 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/AVvXsEhRHC-er6Bsf8i51g5RwLtukj76-g_c5GTEeqRY9IEzIuKNeM6zkKky_fSQc69V6T-THjmb0RhrATlfsp6FZuCbCsOKk1_JITtpVTBwZB-sBat6D8bIP9mYOuYNcpWi_5TexlYUY-Kcvvs/s1600/calendar.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/AVvXsEg8akXaEYKoYT_pxo9hjUK0r8Rd-wyg1Z6XiMXolPllkzsr1gXevKOJpGntmuyItRVInZLtyfw_2Lc1KaxwjYTnMlNecZRm39PC6681llDa-nEw46Kpdt3_fhTOD2fRysjZWu8rKFeuR7g/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>

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.

Share on Facebook Share on Twitter Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.