Blogger Author Bio box with Social icons

Blogger Author Bio box with Social icons - in this tutorial i am share how to add an author bio box in blogger with social icons. By using this author box you should easily add author's avatar, author's bio (Description) and author's social media links.  For request of some friends today i share this tutorial how to install blogger author box.

In this tutorial i will share How to add a professional author box in blogger. This author box can make your blog more attractive.  Everyone want to make their blog more professional and beautiful. Add a Author box in below every posts of blogger. This is a awesome blogger widgets. This widget can help you make your blog more attractive. 


Widget of this tutorial multi-author of this box is used to display google plus profile photo and a brief profile of the author of the article. This widget supports multiple authors if in the blog run admin or have some other authors (guest post).

Features of this Blogger Author Box

• Responsive Design
• Social Icons
• Professional Look
• Auto From Google Plus Profile
• Simple CSS Design
• Easy to Use

Auto from google plus profile means, your about description and your profile picture will collect from google plus profile. That's why you don't need add additional information about you. If you want to show a author bio box in below every posts, then it will be perfect for you. 

How to add blogger author box widget below every post in blogger

This is very simple. You have to need add some CSS code on your blogger template. In this blogger widget most interesting thing is, you can promote your social media links in this widget with round social icons. Although this icons are used with Fontawesome icons. Author box widget for blogger can make your blog more professional. Some users always looking for a beautiful and attractive author bio box for blogger. This widget is specially for his/her. Now lets stat the tutorial. 

Step1: Now lets start the tutorial. Go to Blogger Dashboard > Template > Edit HTMLand past the below code above of </style>

CSS

/* CSS Author Bio Box by MS Design */ .authorboxwrap{Font-family: Open Sans;background:#fff;margin:10px auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;} .avatar-container {float:left;margin-right:20px;border: 1px solid silver;padding: 3px;} .avatar-container img{width:110px;height:auto;} .author_description_container h4{font-family:Open Sans; font-weight:700;font-size:16px;display:block;margin:0;margin-bottom:2px} .author_description_container h4 a{color:#ef4824} .author_description_container h4 a:hover{color:#404040} .author_description_container p{margin:0;color:#888;font-size:95%;margin-bottom:8px;font-family: Open Sans;} .authorsocial a{display:inline-block;text-align:center;margin-right:10px} .authorsocial a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:50%;transition:all .3s;} .authorsocial a:nth-child(1) i {background:#2d609b;color:#fff;} .authorsocial a:nth-child(2) i {background:#19bfe5;color:#fff;} .authorsocial a:nth-child(3) i {background:#eb4026;color:#fff;} .authorsocial a:hover:nth-child(1) i,.authorsocial a:hover:nth-child(2) i,.authorsocial a:hover:nth-child(3) i {opacity:0.90;}


Step2: Now past the below code right after  <data: post.body/>

HTML


<b:if cond='data:blog.pageType == "item"'> <div class='authorboxwrap'> <div class='authorboxfull'> <div class='avatar-container'> <a href=''> <img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/> </a> </div> <div class='author_description_container'> <h4> Author: <a href='#' rel='author'><data:post.author/></a></h4> <p> <data:post.authorAboutMe/> </p> <div class='authorsocial'> <a class='img-circle1' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a> <a class='img-circle2' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a> <a class='img-circle3' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a> <div class='clr'/> </div> </div> </div> </div> <div style='clear:both'/> </b:if>

Now Save Template

Customization:

• Change all #tag into authorsocial div with your social icons. The social icons are, Facebook, Twitter and Gooogle plus. 

Author's Setting for better performance:

1| Go to Google Plus About Section. (https://plus.google.com/u/0/USER-NAME/about)

2| Click Edit button on Story Section and write about yourself on introduction.

3| Save it.

4| After done the above steps now go back to the Blogger Dashboard > Layout > Edit Blog post widget and Check mark View Author Profile Under Post.

5| Save widget.

You'r done. If you found any problem then inform me on comment section. By the way, do not forget to share our post with others. Thanks...