Today I am going to tell you how you can icons to the Author Name, Labels, Time and Comment titles. it will give more professional look to your blog and you will be able get more amazing look of your blog. you have already tried my other post about adding share buttons to blogger. I hope it helped you get some extra traffic from social networks. My other post on changing the length of summary text may also helped you a lot.

What is Awesome?

You can add cool icons to your blogs, you can even add you own photo just near your Author name title in your blog. it is not difficult to handle, new bloggers can also try this perfectly.

How to Do?

]]></b:skin>

Did you get it? good. Now post the following code just above that tag.

.posttime{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisA0bWbJTJwX22ts4SyLwTW0qiLJazszt4rMpb-3MYafbLU0k3_ZJZFSDKZPCOwMPGFK0UycNvIJcXME8-QWMasYK0oMtGICGF6Dzr2OU-Aj9cIwz8KWNZfOdzzsy_-aT9qZmzBoJSrRk/s320/time_sarakuj.png) no-repeat scroll 12px center transparent;padding-left:30px}
.postauthor{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTKtV9gZRgLwN3y-BfmQLqDozQcc0w0108i-UT6hyphenhyphenjZ9Eb-AqvUm7bB1BHqrjoZ0oxKGSChJ5w-vxeXjTWmg79TRcG8SnGmtJHEkDRdTmkM_IwKp5YDfnhnex_snvl7eIxLOrZ2fKSUAw/s320/author_sarakuj.png) no-repeat scroll 12px center transparent;padding-left:30px}
.postcomment{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8zRI-VlEv4Ica8cxDA5KsnKanngkEySEOCNqj1_iCEC8-KL9h3ST95YZqlw4oZ6FMW_mgF2ll4PwHL9LNgxtwm-EZyJEtDg9-JPvfHovZdKY7izL4zsjO3Rurq93-UYSMhiZNap0JY28/s1600/comment_sarakuj.png) no-repeat scroll 12px center transparent;padding-left:30px}
.postlabel{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfOW5SXrX-gpcVL7cS2QDiBYCxCAnpBbiafHidaocxk9smlo3JX5CM29PXZRA5NwCW-RjdD4h6rw40zm2m9ALhPKPN4Oimgjs5qQP7gdnf_kWQ7dWg5PVP7zppg3JrpG6iUQtwqVuJL3U/s1600/label_sarakuj.png) no-repeat scroll 12px center transparent;padding-left:30px}

 These red texts are the url of the icon images. You can use your own icons if you don't like mine. :) You can see these icons are named as time, author, comment, label etc
Now search for the Author tag below

<data:post.author/>

and replace that tag as below

<span class='author'>
Posted by <data:post.author/>
</span>

similarly search and replace other tags by these codes below
replace the Time tag

at <b:if cond='data:post.dateHeader'>
<script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
<data:post.dateHeader/>
<b:else/>
<script>document.write(ultimaFecha);</script>
</b:if>

to

 <span class='posttime'>
<span class='clock'>
at <b:if cond='data:post.dateHeader'>
<script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
<data:post.dateHeader/>
<b:else/>
<script>document.write(ultimaFecha);</script>
</b:if>
</span>
</span>

and replace the Comment tag

 <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

to

<span class='postcomment'>
<span class='com'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</span>
</span>

and replace the Label tag

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>

to

<span class='postlabel'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
  </span></span> 

Now save the template and enjoy the new look of your template.

Other Method

If you want to show whole Author name, Time, Comment, and Label tags at then end of the post then search and delete tags i told above, after deleting search this tag

<div class='post-footer-line post-footer-line-2'>

and paste this code just below that tag

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='title-meta'>
<div><span class='postauthor'>
<span class='author'>
Posted by <data:post.author/>
</span> </span>
<span class='posttime'>
<span class='clock'>
at <b:if cond='data:post.dateHeader'>
<script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
<data:post.dateHeader/>
<b:else/>
<script>document.write(ultimaFecha);</script>
</b:if>
</span>
</span>
</div>
<div>
<span class='postcomment'>
<span class='com'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</span>
</span>
<span class='postlabel'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
  </b:if>

Before You Go

Please backup your template before making any change to your blog. It will help you if you do anything wrong to your blog :) If you face any problem them comment below, i will reply you.