Add Wordpress Style Author Bio Box For Blogger

In   this  post, im  gonna  explain  how  to  add wordpress style author  bio  box for blogger. You  can  add  this  box every end of y our  blog  post. You  can  change  the code according to your details.i mentioned it with  highlighting the code.So, it will easy  for  you. Other  thing is,  for  this bio box.  you  can  use 80 x 80 pixel  image. you  can get my earlier author bio box from here.

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    <div class='post-footer-line post-footer-line-1'>

6. Paste below code Before <div class='post-footer-line post-footer-line-1'> tag

/* Code for the author box starts here bloggertrix.com */
<style type="text/css">
#postauthor { background: #eef7f8; border: 1px solid #c6d9ed; padding:10px; margin: 15px 0; width:650px; 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/AVvXsEjPAIODagiVF2TKAN_Pc1Q9oCchBmvE820Lp7cDbhS4qgdLRiNU1pJobmu1SNU3K_L0ydps0L8vSl7tCLsYITPW4wn2DxiVJwsqRCwWtZ0HAybOnhzUdwwdw67mzkQzwWcnJgbxTXZK3a0O/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkHJ6Gr_cduD0-b3RllsIEB9qLoy_KU-yFx9Q-PpfqBk4FABEmcKXYT5sx2JbKlDyzLJrwfPId805MqahK-llUvUexOCxA8cYVfvqtwemRVOIno5KPTkU_w2q1poF6pp8QXnjwCjP9m7M/s1600/author.jpg'  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 has Written Many Useful Articles.</h5>
<p>If you like This post, you can follow bloggertrix on <strong> 
<a href="http://twitter.com/bloggertrix" rel="nofollow" >Twitter  </a> </strong>. Subscribe to <strong> Bloggertrix feed via <a href="http://feeds.feedburner.com/bloggertrix" rel="nofollow" >RSS</a> or  <a href="http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix&amp;loc=en_US" rel="nofollow" > 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%2Fbloggertrix&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/bloggertrix" class="twitter-follow-button" data-show-count="false" data-size="small">Follow @bloggertrix</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/107955298793879607964" target="_blank" rel="nofollo" class="gplus-s" >Google</a></div></div>
</b:if></b:if>

Replace with red color link with your author image link.
Replace bloggertrix with your twitter ID
Replace bloggertrix with your  feedburner ID
Replace bloggertrix with your  facebook ID
Replace 107955298793879607964 with your  Google plus ID

7. now click save template. you are done...