Display Post Author, Date And Labels With Icons Below Blogger Post 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS-N-hKNPLGSxRvywRoeKSkjpHl3VmnW8Xshdxm42B046J4SzFVATbX-J2jKg-7QcosB2eMiSuOIJy10JW2wYAn-Hpcn7TFtQ-S4xvZUwVCiaKxBThzsgEaED1bSed3rDNt3qoE0O5JR8/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/AVvXsEjdVOZdJrT7JhHaaa_pwv1UpFSi8VfJNAX3w-sAtTCnnl3eBva7lsElGeauOLJ6YRW4G60aDQ3ODFFxmy3F5UagRBieMSAtA-6O67dxoe7r5JnSs6_-PpYmcPjzpHJAaNfKO_kQWGJLd2I/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/AVvXsEiegIavwO5BlgV0Bo-XzbEK1UlEO8rChnm6HWi-iFb3jnXR0nvUcmxShcjuNs7fims5905mp5uwXn7K7-oidQJpkw_2AiLR1bgGoRlhV9oTnTUuxm6u9bCWhmLHe4RLRM-I11tox98uZOw/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu9AMjhhbfk_oZ0or4PXbMjs0_KHCKQ-4KWEU6NhA5KmurY6KplCfxE0dNCfr1_MLnnbS5J8Umqf98p5UrORQmqQnm4a3PzyPY6FQds3Agph-fj6IK7Pq_vpX2B6LwBlaeThjMcWj0ul0T/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.


Comments

Popular posts from this blog

16 Best Free Blogger Templates Featuring Amazing JQuery Featured Slideshows