Your Website or Blog Needs Multiple Author Bio Box? Do you want to add Multi Author Box in Blogger Template? Today in this article we are going to explain How you can add Beautiful Multiple Guest/Author Bio's Widget Box inside the blogger website.Multi Author box will be visible just at the end of the article/posts or you can say just above the post footer.Now days there are lot's of trick to install multiple author gadget plugin in blogger template but we have tried our best to make it as much simple as possible hope you guys will like it.Benefits of multi author box widget is like if your website's or blog have multiple author's admin's and they all write the content so that time we need multiple author box to display the Bio of the author.
Multi Author Box widgets comes with Social media profile links and about the author section and their image/avatar.Multiple author box tool plugin display the author information from their google plus profile and this features makes this widget unique and stylish.Because we have seen lot's of Multiple author tools and in all that we need to write the author/admin/guest intro manually but in this multi author box widget auto calls information from google + profile and display in front of readers.We have used some CSS to give some stylish look and HTML.One of our precious reader asked for Multiple author bio box widget so that we have decided to make this widget best and today we are here with this unique beautiful Multiple Author Biography widget.So to grab this plugin follow the steps mentioned below.
How to install multiple Author Biography Widget In Blogger Template
Installation Steps:
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on Template -> Edit HTML.
Step 3. Now Search for the following <data:post.body/> tag and copy the below code snippet and paste it just after the <data:post.body/> tag.
Step 3. Now Search for the following <data:post.body/> tag and copy the below code snippet and paste it just after the <data:post.body/> tag.
<b:if cond='data:blog.pageType == "item"'>
<div class='bsd-author-box-wrap'>
<div class='bsd-author-box-full'>
<div class='boxbsd-avatar'>
<a href=''>
<img class='author-image' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='111' width='111'/>
</a>
</div>
<div class='author-des-bsd-cntr'>
<h4><a href='#' rel='author'><data:post.author/></a></h4>
<p>
<data:post.authorAboutMe/>
</p>
<div class='authorsocialprofile'>
<a class='img1' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img2' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='img3' 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>
Step 4. Now Search For the ]]></b:skin> or </style> and copy the below CSS code and paste it just Before/Above.
/* Multiple Author Box CSS By www.BloggersStanD.com */Step 5. Now save your Template
.bsd-author-box-wrap{background:#fff;margin:0 auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;}
.boxbsd-avatar {float:left;margin-right:20px;}
.boxbsd-avatar img{width:110px;height:auto;}
.author-des-bsd-cntr h4{font-weight:710;font-size:15px;display:block;margin:0;margin-bottom:1px}
.author-des-bsd-cntr h4 a{color:#FF6600}
.author-des-bsd-cntr h4 a:hover{color:#2C2C2C}
.author-des-bsd-cntr p{margin:0;color:#5F5F5F;font-size:95%;margin-bottom:7px}
.authorsocialprofile a{display:inline-block;text-align:center;margin-right:10px}
.authorsocialprofile a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:2px;transition:all .3s;}
.authorsocialprofile a:nth-child(1) i {background:#2d609b;color:#fff;}
.authorsocialprofile a:nth-child(2) i {background:#19bfe5;color:#fff;}
.authorsocialprofile a:nth-child(3) i {background:#eb4026;color:#fff;}
.authorsocialprofile a:hover:nth-child(1) i,.authorsocialprofile a:hover:nth-child(2) i,.authorsocialprofile a:hover:nth-child(3) i {opacity:0.90;}
How to Display Author Information/Description In Widget
Step 1. Visit your google plus profile https://plus.google.com and that click on About Section and now click on Add a introduction look below for example:
Step 2. Now if you have completed the above step ,you need to proceed to step 2nd i.e is in your blogger.Open your blogger Dashboard->Layout then go to main area and check show author profile below posts look below for example:
Step 3 . After Clicking on Show author profile below post save your widget..Done !