Add WordPress Style Author Bio Box In Blogger Blog

Many BlogSport users want an Author Bio Box like WordPress hosted blogs. So, here is a good news for all Blogger users that you can get an Author Bio Box in Blogger Blogs with the help of simple trick. The Author Bio Box is also useful for blogs like BlogsDaddy.Com which receive  a lot of guest-posts daily.

In tutorial I'm going to share how to add WordPress style author bio box in Blogger blogs. You can change the information in code according to your choice. If you want to use your own image in author box then use 80 x 80 pixel image. See demo below and after that follow steps to add this widget.

You May Like To Read:

• Simple RSS Feed Subscription Widget For Blogger Blog
• Add Thesis Email Subscription Widget To Your Blogger Blog

Live Demo

How to Add WordPress Style Author Bio Box In Blogger Blog

• Go to Blogger Dashboard > Template 
• Click EDIT HTML Button > Proceed
• Press (Ctrl+F) & Find Below Code

]]</b:skin>

• Paste Below Code Before ]]</b:skin>

#postauthor { background: #eef7f8; border: 1px solid #c6d9ed; padding:10px; margin: 15px 0; width:630px; height:100px; 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/AVvXsEhyyji17V15u4pCY6LTF64me2jXPgnGF-XukfZFwqzxskLhwiuvcOHrqGufjXDHDT5lskyqRiYLqPqaqPWQVVcDJENkUKWJ_zNraemM5Opf7rFCgi2LRyXWIbnJEfZZH4alWdQjn6PIx4fn/s1600/gp-icon.png") no-repeat 0 0px; color: #666;  font-weight: bold;margin: 5px 0px; padding: 0 20px;text-decoration: none;}

• Now Press (Ctrl+F) & Find Below Code 

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

• Paste Below Code Before <div class='post-footer-line post-footer-line-1'>

<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/AVvXsEi_WoPN6E1iUx74GrC9i-UlUZAqs02PFHgfwTvEY4fWAUTKqX0jq4xGtgCP1qrmL6iN8GVuUTvwj9u_INuzD0tfwrgUQwvWt8O5a5LwQ-Ima4yRegxbFvzSUxv8gYzWyO2OoXDeJ5ZNKxs/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>"Author Name" has Written Many Useful Articles.</h5>

<p>If you like This post, you can follow Blogs Daddy on <strong> 

<a href="http://twitter.com/BlogsDaddy" rel="nofollow" >Twitter  </a> </strong>. Subscribe to <strong> Blogs Daddy feed via <a href="http://feeds.feedburner.com/BlogsDaddy" rel="nofollow" >RSS</a> or  <a href="http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy&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%2FBlogsDaddy&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/blogsdaddy" rel="nofollow" target='_blank' class="twitter-follow-button" data-show-count="false" data-size="small">Follow @blogsdaddy</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/u/0/106217413057730068740" target="_blank" rel="nofollo" class="gplus-s" >Google</a></div></div>

</b:if></b:if>

Remember Notes : The social and feed links are highlighted in yellow, you need to change these to your own. You can replace pink color highlighted link with your own author pic and you can change author name by changing "Author Name" in red color.

• Now Click On Save Your Template and You're All Done!

I hope you like this widget and if you need our help you can ask via comment box or email me.For more updates and useful tips and tricks subscribe us.

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.