How To Install Multi Writer Bio Box Widget Inward Blogger

Your Website or Blog Needs Multiple Author Bio Box? Do you lot desire to add Multi Author Box inwards Blogger Template? Today inwards this article nosotros are going to explicate How you lot tin add together Beautiful Multiple Guest/Author Bio's Widget Box within the blogger website.Multi Author box volition endure visible but  at the goal of the article/posts or you lot tin nation but inwards a higher house the post service footer.Now days at that topographic point are lot's of fob to install multiple writer gadget plugin inwards blogger template but nosotros accept tried our best to teach far every mo much uncomplicated every mo possible promise you lot guys volition similar it.Benefits of multi writer box widget is similar if your website's or weblog accept multiple author's admin's in addition to they all write the content thus that fourth dimension nosotros demand multiple writer box to display the Bio of the author.

Multi Author Box widgets comes amongst Social media profile links in addition to close the writer department in addition to their image/avatar.Multiple writer box tool plugin display the writer information from their google summation profile in addition to this features makes this widget unique in addition to stylish.Because nosotros accept seen lot's of Multiple writer tools in addition to inwards all that nosotros demand to write the author/admin/guest intro manually but inwards this multi writer box widget automobile calls information from google + profile in addition to display in front of readers.We accept used some CSS to laissez passer on some fashionable hold off in addition to HTML.One of our precious reader asked for Multiple writer bio box widget thus that nosotros accept decided to brand this widget best in addition to today nosotros are hither amongst this unique beautiful Multiple Author Biography widget.So to catch this plugin follow the steps mentioned below.

How to install multiple Author Biography Widget In Blogger Template

Installation Steps:

Step 1. Log inwards 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 in addition to re-create the below code snippet in addition to glue it but afterwards 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 re-create the below CSS code in addition to glue it but Before/Above.

/* Multiple Author Box CSS By www.BloggersStanD.com */
.bsd-author-box-wrap{background:#fff;margin:0 automobile 20px;padding:20px;overflow:hidden;border:1px company #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 salvage your Template

How to Display Author Information/Description In Widget 

Step 1. Visit your google summation profile https://plus.google.com and that click on About Section and at in 1 lawsuit click on Add a introduction hold off below for example:

Step 2. Now if you lot accept completed  the inwards a higher house footstep ,you demand to popular off along to footstep 2d i.e is inwards your blogger.Open your blogger Dashboard->Layout thus teach to primary surface area in addition to check demo writer profile below posts look below for example:

Step three . After Clicking on Show writer profile below post service salvage your widget..Done !