Steps to add Author Box Below Each Post in Blogger [Blogspot]

Advertisements

1. Go to your www.blogger.com 

2. Select your blog in which you want to  add Author Box Below Each Post

3. Click on Theme from Left Menu.

4. Click on Arrow my theme like bellow.

5. Click on Backup/Restore your template before doing any Changes.
6. Click on Arrow my theme on Again and click Edit HTML.

7. Search for the Below code

]]></b:skin>

8. Now paste the below CSS code just above the code

.author-profile {
    background: #f6f6f6;
    border: 1px solid #eee;
    margin: 15px 0 15px 0;
    padding: 8px;
    overflow: hidden;
}

.author-profile img {
    border: 1px solid #ddd;
    float: left;
    margin-right: 10px;
}

<b:includable id='post' var='post'>

9. After the above code Scroll down find the bellow code

<div class='post-footer'>

10. Now just the above code paste the bellow code before above code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.authorAboutMe'>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
  <b:if cond='data:post.authorPhoto.url'>
	<img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
  <b:else/>
	<img itemprop='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzT3VlLRkZ5ROVul2ZKNTfkfQMaF7d15osih5pjLG8mlt7Tjl4gZpW74gEHfhvyHKCVUnD6tYymGg3pcRZKH9IECVZ05DRR2bt6Ydnfsg5-cS4sONcKCkcm2Lzvw8edAu6xtbeSWpi6M0/s1600/no-avatar-50.png' width='50px'/>
  </b:if>
  <div>
	<a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
	  <span itemprop='name'><data:post.author/></span>
	</a>
  </div>
  <span itemprop='description'><data:post.authorAboutMe/></span>
</div>
</b:if>
</b:if>

11. Save the Template. Now check any post in your blog.  The Author Profile will look like below under each post of your blog.