How to Add Author Bio Box on Blogger

In adding author bio box on blog that uses blogger as platform, one must enable first the show author profile on the default blogger template.

How to Enable Author Profile on Blogger

1. Open your blogger account and go to blogger dashboard then layout of the blog where you want your author profile to appear.

2. Once on the “Layout” window, click edit on the blog post.

3. Activate “Show Author Profile Below Post”.

Now that the author profile is activated you can now add author bio box on your blog.

How to Add Author Bio Profile on Your Blog

1. Go to the blog template where you want the author bio will appear and select “Edit Html”.

2. Once the Html window is displayed, click on “CTRL F” then search for “]]></b:skin>”. The word you are searching will be displayed with highlighted yellow color.

3. Paste the below code just after the highlighted word.

"
.tbs-author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.tbs-author-box p {
margin: 0;
padding: 0;
}
.tbs-author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}"

4. Next is to locate this code "<data:post.body/>" using “CTRL F” again. Then paste the below code after "<data:post.body/>".
 
"<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;[YOUR AUTHOR NAME HERE]&quot;'>
<div class='tbs-author-box'>
<p>
<img alt='' class='avatar avatar-60 photo' height='100' src='[YOUR AUTHOR IMAGE LINK HERE]' width='110'/><b>About Author</b><br/>


[YOUR AUTHOR BIO HERE]

 <br/></p>
</div></b:if>"
 
5. Save your template.