Add Author Bio Widget below each blog Post for Blogger

LIVE DEMO

Follow Simple Step to Add Author Bio Widget to your blogger blogs.

1. Go to  Blogger > Design > Edit HTML
2. Backup your template
3. Expand Widget Templates 
4. Search for the following code (Using CTRL+F Search Box)

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

 5. Just below it paste the following code

CSS Style CODE:

<style type="text/css">#postauthor { background: #eef7f8; border: 1px solid #c6d9ed; padding:10px; margin: 15px 0; width:100%; height:90px; font-family:Georgia, "Times New Roman", Times, serif; }    #author-info{float:left; width:410px; padding:0 15px 0 0; border-right:1px solid #ccc; }        #author-info img {background:#fff; border: 1px solid #ddd; float: left; margin-right:10px;padding: 5px;box-shadow: 0 0 3px #CCC; padding:3px;}        #author-info h6 { color: #666; font-size: 18px; font-family:Georgia, "Times New Roman", Times, serif; font:Georgia, "Times New Roman", Times, serif }        #author-info h5 {color:#666; text-transform:none; font-size:12px; letter-spacing:0; font-family: Georgia;}        #author-info p { color: #515151; font-size: 12px; line-height:16px; font-family: Georgia;}        * { margin:0; padding:0;}#author-connect{width:21%; float:right; margin-right:8%; }a.gplus-s{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs65GnRK9WIERL25xwjGGhoBXUHPRiWTbL33AcygcptjQ7sAuSngLOL9iVjx6zoW_jJSEtXDDaYTT7FOGTFCDiLKsF3nWxruzLBegUO6sipuRozRVdSgPMI1nm8ovPRV_kGLDrEf7RduCr/s1600/gp-icon.png") no-repeat 0 0px; color: #666;  font-weight: bold;margin: 5px 0px; padding: 0 20px;text-decoration: none;}
</style><b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:post.author == &quot;Author Name&quot;'><div id="postauthor"><div id="author-info"> <img alt='' src='https://lh3.googleusercontent.com/-ZwzsMwuQy6k/AAAAAAAAAAI/AAAAAAAAAss/lbSTNwdDDNI/s120-c/photo.jpg?s=80&amp;d=&amp;r=G'  height='80' width='80' /><h6 style="font:Georgia">Article by <a expr:href='data:post.authorProfileUrl' rel='author'><data:post.author/></a></h6><h5>AuthorName write your Sub-heading here</h5><p>If you like This post, you can follow ProBloggingTools on <strong> <a href="http://twitter.com/TwitterUsername" rel="nofollow" >Twitter  </a> </strong>. Subscribe to <strong> Complete BLogger Tool feed via <a href="http://feeds.feedburner.com/FeedburnerID" rel="nofollow" >RSS</a> or  <a href="http://feedburner.google.com/fb/a/mailverify?uri=FeedburnerID&amp;loc=en_US" rel="nofollow" value"FeedburnerID" > EMAIL </a>  </strong>to receive instant updates.</p></div><div id="author-connect"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FFacebookUSERNAME&amp;send=false&amp;layout=button_count&amp;width=120&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=230688610312045" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px;" allowTransparency="true"></iframe>          <a href="https://twitter.com/Twitter-ID" class="twitter-follow-button" data-show-count="false" data-size="small">Follow @Twitter Username</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <a href="https://plus.google.com/GOOGLE+1-ID" target="_blank" rel="nofollo" class="gplus-s" >Google</a></div></div></b:if></b:if>

CUSTOMIZE:

Edit all Highlighted links in the above CSS code.
Edit Author Name with your Eject Profile Name. (Important )
    7. Edit RSS URL, E-mail URl and Twitter ID.
    8. Edit all Social Media Links with yours.
    9. Change your Gravatar Profile Picture URL
   10. Save template and Visit your blog.