How To Add Multiple Author Box Widget on Blogger

How To Add Multiple Author Box Widget on Blogger

How To Add Multiple Author Box Widget on Blogger

Today Post For Every Blogger Users; Who Appointed New Author/Admin For His/Her Blogger Site. If You Have Multi Author On Your Blog or Planning To A Invite New Author Widget Then You Might Be Wondering a possible to Add Multi Author Box For Every New Appointed Authors. ???? So Today, We Are Shown How to Add Multiple Author Box.

Also Read : How To Add Responsive Ads On Middle Post
Also Read:  How To Set Seo On Blog Full Article Genuine

How To Add Multiple Author's Box ??

? First Log In Your Blogger Account

? Go To Theme Click On Edit Html

? Next Search For <Style> Tag or ]]</b:skin>  tag

? Now Paste Below CSS Code To Above ]]</b:skin> Tag

.wd-about-author-containter{ background: #eee; border-bottom: 1px solid #ddd; color: #111 !important; border-radius: 10px 10px 10px 10px; margin-bottom: 24px; padding: 16px; font-family: Georgia,"Times New Roman",Times,serif; font-size: 18px; font-style: italic; line-height: 26px; text-align: center; display: inline-block; } .wd-about-author-containter p{ margin:0; padding:0; margin: 0 0 10px; }.wd-about-author-containter .wd-heading { margin:0; padding:0; font-size:23px; }.wd-about-author-pic{ background: #eee; border: 1px solid #e7e7e7; float: left; height: 100px; width: 100px; padding: 4px; margin-right: 5px; }.wd-about-author-pic img{ width: 100px; padding: 0; }

Now Finally Need To Be Add Html Part

?Now Follow Above Method To Find Below Tag

? Search For <div Class ='post footer'>  tag
?Now Copied The Below Code Paste It To Be Below Above <div Class ='post footer'> Tag.

<!--responsive multi author box by rashmi -->  <b:if cond='data:blog.pageType == "item"'>  <b:if cond='data:post.author == "ADMIN"'>  <div class='wd-about-author-containter'>
<div class='wd-about-author-pic'>
<img alt='' class='avatar avatar-100 photo' height='100' src='http://i68.tinypic.com/2evxo9d.png' width='100'/></div>
<div class='wd-about-author-text'>
<div class='wd-heading'>
About the Author</div>
<p>
ADMIN-AUTHOR-BIO You can follow him on <a href='YOUR-TWITTER-URL'>Twitter</a>, <a href='YOUR-FACEBOOK-URL'>Facebook</a> or <a href='YOUR-GOOGLE-PLUS-URL?rel=author'>Google+</a></p>
<div style='text-align: right; line-height: 0;'>
 <a href='https://websduniya.blogspot.com/' style='text-decoration: none; color: #BBBBBB; font-size: 50%;'>[Get this widget]</a></div>
</div>
</div>
</b:if></b:if>  <!-responsive multi author box by rashmi-->   <!--GUEST AUTHOR WIDGET STARTS-->  <b:if cond='data:blog.pageType == "item"'>  <b:if cond='data:post.author == "GUEST-AUTHOR-NAME"'>  <div class='wd-about-author-containter'>
<div class='wd-about-author-pic'>
<img alt='' class='avatar avatar-100 photo' height='100' src='http://i1203.photobucket.com/albums/bb382/chandeep10/guest-author-img.gif' width='100'/></div>
<div class='wd-about-author-text'>
<div class='wd-heading'>
About the Author</div>
<p>
GUEST-AUTHOR-BIO</p>
<div style='text-align: right; line-height: 0;'>
 <a href='https://websduniya.blogspot.com/' style='text-decoration: none; color: #BBBBBB; font-size: 50%;'>[Get this widget]</a></div>
</div>
</div>
</b:if></b:if>  <!--GUEST AUTHOR WIDGET ENDS-->

Pls Note *  

ADMIN - Replace this with Your name.

GUEST-AUTHOR-NAME - Replace this with Guest author name.

ADMIN-AUTHOR-BIO - Replace this with your  bio.

GUEST-AUTHOR-BIO - Replace this with your guest author's bio.

?Finally Click To Save Your Template. Voila! 

Thank You For Reading Our Article; Hope Your Are Like This Also May Be Helpful For You. Please Take 1 minute To Share This Post. Also If You Have Any Asking About Related To Query Then Pls Let's Us Know We Will Reply As Soon As Possible. Thank You.