20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

How To Install Multi Author Bio Box Widget In Blogger

Tutorial On Creating Installing Adding new 2016 stylish Multiple Author+Admin Biography widget gadget tool plugin box in blogger template,auto display+show about me+introduction from google plus profile.
How to add multiple author+admin biography+bio new 2016 widget in blogger template
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.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 */
.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;}
Step 5. Now save your Template

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:
how to add introfuction in google plus profile about me section tab
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:
show author bio below the posts in blogger template
Step 3 . After Clicking on Show author profile below post save your widget..Done !

Post a Comment