How To Add Multiple Author Box Widget on Blogger - WebDuniya

Thursday, August 23, 2018

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
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.

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.
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

1 Comments:

For Instant Reply Notification- Tick Below Notify Me Box
EmoticonEmoticon

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

We never sent spam ! feed by google