Add "About Author" box below every blog posts in Blogger | How to

This is a tutorial on adding a simple and clean About Author below every posts in Blogger that only appears on post pages. I am sure that all of us would have seen this feature mostly in Wordpress blogs. But now, Blogger users can have this feature too. You may have a look at my latest Blogger template, Charisma where I've implemented this feature. Follow easy steps below to add it.

1. Go to Edit HTML page in Blogger and tick the "Expand Widget Templates" checkbox above the top right corner of the template code box.

2. Now find for the ]]></b:skin> code using CTRL+F and replace it with the code below.

/***** Author Box ********************/

.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}

.author-box p {
margin: 0;
padding: 0;
}

.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}

]]></b:skin>

3. Then, search for <div class='post-footer-line post-footer-line-1'>. Immediately after that, paste the code below.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCUayUkFo3El_fHgGTzlQk2KXwHrmrYvlWPdNovK9fPFex1Y0zTV4BxY7qhSPB7fbp860ejYoNOKsalF5tbBZm_jSFyWcutFdaNns_7s_JMTq9jZVlkRT9U97uitzfTlEPOfv6-G1s_E-p/' width='70'/><b>About Author</b><br/>
Write anything about you here!<br/></p>
</div>
</b:if>

4. Click "Save" and done.

<b:if cond='data:blog.pageType == &quot;item&quot;'>....</b:if> is to make sure that the box is only visible in post pages and won't appear in Home Page. If you want to show your own image, just replace the default image source shown in green colour text in the code with your IMAGE URL.