How To Add Author's Information Box Below Every Post On Blogger Blog?

Author box is one of the important widget that you must have in your blogger blog. It helps your viewers to know the person behind the blog. If there are many authors then it will help you out to know the author of specific blog post. An author box may contain the information like author's name, Short biography, thumbnail picture and other info like author's Facebook profile, twitter account link etc as your wish. You may have seen the author's information or about us box below in most professional blogs. So let's add it in your blog.

Let's Get Started:

1. Log in To your blogger's Dashboard.

2. Go To Template and click on edit template.

3. Find ]]></b:skin>.

4. Copy the following code and paste it just above  ]]></b:skin> .

.author-box {
  background: #28282E;
  color: #FFFFFF;
  margin: 20px 0 30px 0;
  padding: 10px;
  overflow: auto;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  border-right: #929292 solid 3px;
  border-bottom: #929292 solid 4px;
  box-shadow:inset 20px 0px 20px 0px #111;
  -moz-box-shadow:inset 20px 0px 20px 0px #111;
  -webkit-box-shadow:inset 20px 0px 20px 0px #111;
}
.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;
}

5. Search for the given codes.

<div class='post-footer-line post-footer-line-1'/>

6. Copy and paste the following code and paste it below the above codes. (Note: Don't forget to make replacements)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='Your Image Link' width='70'/><b>About the Author</b><br/>
<div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'> Write Something About Yourself <br/>

Connect Him on <a href='https://plus.google.com/Your Google Plus ID'>Google Plus</a> And <a href='https://www.facebook.com/Username'>Facebook</a>
<p style='margin:-8px 0'><br/><center>
<a href='http://e-trickszone.blogspot.com/2014/04/How-To-Add-Author-Information-Box-Below-Each-Post-On-Blogger-Blog.html' style='text-decoration:none;font-size:70%;'>Get This Widget</a></center></p></div></p>
</div>
</b:if>

Replacements: 

Your Image Link: Replace it with your image's url.

Write Something About Yourself: Write a short bio about yourself.

Your Google Plus ID: Replace with your Google plus id.

Username: Replace with your Facebook Username.

Finally click on save. You are done.