Add a Simple Customizable Author Bio Box to Blogger
Author bio boxes below posts make it easy for your visitors to recognize and communicate you. These boxes are much better than a tiny text name of the author which remains invisible for most visitors. But when you add an author bio box to your blog, it tells visitors strongly that you are the author of the post which they are reading. Author boxes increase the communication or commenting on your blog which is a necessary for a successful blog.
I am going to share a simple but easy to customize author bio box for your Blogger blog which can be added and customized to any Blogger template easily. I am also using this box on my blog and you can view its demo at bottom of this post. To add this box to your blog posts, follow below simple steps:
1. Sign-in to Blogger dashboard, select your blog and go to its template section
2. Click on "Edit HTML" option
3. Check the box saying "Expand Widget Templates" at top left of the code containing window
4. Press Ctrl+F, find <div class='post-footer-line post-footer-line-1'> and paste below code before it
<div align='justify' id='entryMeta' style='background-color:LightGrey;'>
<hr color='grey' size='3'/>
<img align='left' alt='' class='avatar avatar-39 photo' height='39' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_KyaTd15avXbyeXnBYmnuVBier3s9jS8A0ng2Cv599IMa4UiQzBYS6u5MXOCA6gZj-gHXWEJalUFR-V079yDsUl2vZsvysv9psHnb5Vno9bDd4EQwJkgKNuYYdhyphenhyphenwpx4AhpFtNhWphjA/s128/avatar.png' width='39'/>This post is written by <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<data:post.author/>
</a> for <data:blog.title/>. It was posted on <data:post.dateHeader/> at <data:post.timestamp/>. The post is filed under <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 != "true"'>,</b:if>
</b:loop>.
You can follow any responses to this entry through the <a href='/feeds/posts/default/'>RSS 2.0</a>.
Also feel free to leave a response about this entry. We welcome comments and always love to hear from you.
<hr color='grey' size='3'/>
<div class='clear'/>
</div>
<hr color='grey' size='3'/>
<img align='left' alt='' class='avatar avatar-39 photo' height='39' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_KyaTd15avXbyeXnBYmnuVBier3s9jS8A0ng2Cv599IMa4UiQzBYS6u5MXOCA6gZj-gHXWEJalUFR-V079yDsUl2vZsvysv9psHnb5Vno9bDd4EQwJkgKNuYYdhyphenhyphenwpx4AhpFtNhWphjA/s128/avatar.png' width='39'/>This post is written by <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<data:post.author/>
</a> for <data:blog.title/>. It was posted on <data:post.dateHeader/> at <data:post.timestamp/>. The post is filed under <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 != "true"'>,</b:if>
</b:loop>.
You can follow any responses to this entry through the <a href='/feeds/posts/default/'>RSS 2.0</a>.
Also feel free to leave a response about this entry. We welcome comments and always love to hear from you.
<hr color='grey' size='3'/>
<div class='clear'/>
</div>
5. Customize the highlighted values the way you like. Replace LightGrey with color you want to set for background of the author bio box. Replace red highlighted URL with path to your profile image if you don't want to use the default one and set the width and height of image by modifying highlighted values in purple
6. You can also customize the text to describe yourself
7. Save the template. You are all done!!
Note: The box may not appear in some templates when you place the code before <div class='post-footer-line post-footer-line-1'>. If this is the case with your template, find <div class='post-body entry-content'> and put the code just below it. This will fix your issue. If you still have any question, you can comment below to ask us.