How To Add Author Info Box At The End Of Every Post

In WordPress blogs you might have noticed "About the author" or "This post was written by" or something that gives information about the author of the post.

In this tutorial, I will explain how can you get your own author box by editing HTML!!

Let's start:

-First of all,before making any changes to your beautiful template, backup your template.

-Log-in to your blogger account.

-Click on Design tab and then on Edit HTML

-Now,check the box"Expand Widget Templates"

-Look for(Press Ctrl+F) the following code:

]]></b:skin> 

Paste the following code above that:

.author_info {
    float: left;
    width: 573px;
    height:140px;
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 15px;
    margin-top: 15px;
    background: #eee;
}
.author_info h3 {
    margin-bottom: 10px;
}
.author_photo {
    float: right;
    margin: 0 0 0 10px;
}
.author_photo img {
    border: 1px solid #666;
}

-Now,search for the following code:

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

-Then insert the following HTML codes below it:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class='author_info'>
<div class='author_photo'>
<img alt='author' src='https://lh4.googleusercontent.com/-mVcWFPH0OUo/TljCjKzbKXI/AAAAAAAABN0/ckOEh1Whzlk/s800/hemant.PNG'/></div>
<h3>This post was written by: Hemmannt</h3>                   
 <p>Hemmannt is a blogger and web enthusiast.      Follow him on <a href='http://twitter.com/hemmannt'>Twitter</a> and <a href='https://www.facebook.com/pages/hemmannt/178086658915942'>Facebook</a><br style='clear:both;'/></p>
 </div></b:if>

Now,change the information in text and links to your desired text and links by adding your twitter,Facebook links.You can also create more links for your other contact information(social networking accounts and e-mail) and may change the width,color etc.