Spice Up Your Blogger Blog with Custom Designed Templates - BTNT Services!

How To Add Multiple Author Bio Widget For Blogger Blog

On By // 43 comments
Advertisement
How To Add Multiple Author Bio Widget For Blogger blog
Many readers asked me "How to add Author box for multiple author blogger blog" So I designed this widget. This widget is for Blogger users only as WordPress has various plugins to deal with author boxes. If you own a multi author blog, then you might be wondering a possible way to add author boxes for each of those contributes. There a few old ways that to add author box. One is a manual way to add author box HTML code in Blogger post editor each time that we write a post. That can be irritating for the author and we have an another way that I previously published in this blog to Add author information box below post to Blogger blog But this old version can be done only for single author blog.
So today, we'll see how to add multiple author boxes only once, and each time a particular author writes a post, his author bio would be shown up automatically below their post. This Sounds better Right!
Live Demo :-

How To Add Multiple Author's Bio Widget For Blogger :-

Adding author bio widget can be done by two simple steps. Following are the two simple steps.

Adding CSS Part Of The Author Bio Widget :-

  1. Go to Design > Edit HTML  (New interface: Template > Edit HTML).
  2. Now search for ]]></b:skin>
  3. Above that place the css code given below
    .btnt-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;  }
    .btnt-about-author-containter p{  margin:0;  padding:0; margin: 0 0 10px;  }
    .btnt-about-author-containter .btnt-heading {  margin:0;  padding:0;  font-size:23px; }
    .btnt-about-author-pic{  background: #eee;  border: 1px solid #e7e7e7;  float: left;  height: 100px;  width: 100px;  padding: 4px;  margin-right: 5px;  }
    .btnt-about-author-pic img{  width: 100px;  padding: 0;  }
  4. Now save your template.

Adding HTML Part Of The Author's Bio Widget

  1. Expand your template, that is, make sure you have a tick mark in box next to "Expand Widget Template". Now, search using "CTRL+F" for <div class='post-footer-line post-footer-line-1'/>
  2. Copy the code below. Now paste the code just below the line you searched in step:1
    <!--BLOG ADMINISTRATOR WIDGET STARTS-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:post.author == &quot;ADMIN&quot;'>
    <div class='btnt-about-author-containter'><div class='btnt-about-author-pic'><img alt='' class='avatar avatar-100 photo' height='100' src='http://i1203.photobucket.com/albums/bb382/chandeep10/blogger-logo.png' width='100'/></div><div class='btnt-about-author-text'><div class='btnt-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='http://www.blogtipsntricks.com/' style='text-decoration: none; color: #BBBBBB; font-size: 50%;'>[Get this widget]</a></div></div></div>
    </b:if></b:if>
    <!--BLOG ADMINISTRATOR WIDGET ENDS-->


    <!--GUEST BLOGGER WIDGET STARTS-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:post.author == &quot;GUEST-AUTHOR-NAME&quot;'>
    <div class='btnt-about-author-containter'><div class='btnt-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='btnt-about-author-text'><div class='btnt-heading'>About the Author</div>
    <p>GUEST-AUTHOR-BIO</p>
    <div style='text-align: right; line-height: 0;'>
    <a href='http://www.blogtipsntricks.com/' style='text-decoration: none; color: #BBBBBB; font-size: 50%;'>[Get this widget]</a></div></div></div>
    </b:if></b:if>
    <!--GUEST BLOGGER WIDGET ENDS-->
  3. Replace the Highlighted code above as shown below.
    • ADMIN - Replace this with Your name (i.e. Chan Deep for blogtipsntricks.com admin). 
    • GUEST-AUTHOR-NAME - Replace this with Guest author of your blog.
    • YOUR-TWITTER-URL - Replace this with your twitter profile url.
    • YOUR-FACEBOOK-URL - Replace this with your facebook fan page url.
    • YOUR-GOOGLE-PLUS-URL - Replace this with your google plus profile url.
    • ADMIN-AUTHOR-BIO - Replace this with your author bio.
    • GUEST-AUTHOR-BIO - Replace this with your guest author's bio.
  4. That's it!!! Save your template. View the widget on your post pages.
Note:- You should repeat the code for guest author each time you get a new author for your blog. The number of guest author bio widget you have in your template depends on the number of guest authors you have.
If you have any problem with this widget feel free to use the comment box and if it works for you, Please take 5 seconds to share it. :)

43 comments:

  1. Long waiting for this widget from you. Will apply this now to one of my site.
    Thanks for having time to help others.

    ReplyDelete
  2. Error parsing XML, line 1183, column 7: The element type "b:if" must be terminated by the matching end-tag "".

    I am getting the above error.

    ReplyDelete
    Replies
    1. Just place the HTML code After the <div class='post-footer-line post-footer-line-1'/>

      Still getting error. Contact me with the Explained procedure you followed And also give your Blog URL.

      I'm here to help you. :)

      Delete
  3. Hey, why can you convert and publish this theme, can you give any timeline if you are on it?

    http://demo.kolakube.com/aroxis/

    ReplyDelete
    Replies
    1. I will publish it but it take time Because I'm currently working on marketers delight 2 and I have my exams, So it takes up-to one month to publish. Please Wait..

      Delete
  4. Hi,

    Great info... I am using it for my blog Bytes and Banter (bytesandbanter.blogspot.in). I also want to modify the footer w.r.t. the label using data:label.name but my label.name field doesn't produce the desired result. Do you have any suggestions as to how I can change this?

    ReplyDelete
  5. Why the hell it doesn't work for me

    ReplyDelete
    Replies
    1. Let me Know about the problem You're getting.

      I'll help you to fix it :)

      Delete
  6. i have paste the code below div class='post-footer-line post-footer-line-1'>

    but getting this error
    Error parsing XML, line 1413, column 3: The element type "b:if" must be terminated by the matching end-tag "".

    ReplyDelete
    Replies
    1. Hi Danial,

      I Just checked the code it's fine. Please try it another time.

      Still getting the error kindly contact me through contact form I'll help you.

      Thanks Bro... ;)

      Delete
  7. Chan, i am using a free template on my blogger blog. I have added my friend as an author to my blog but his posts show my author box...I want to keep my css for style, but having trouble understanding the blogger variables to add the second author box. Can you please help me?

    ReplyDelete
    Replies
    1. URL for my site is www.motor-heads.co.uk if that helps.

      Delete
  8. Thanks for creating this beautiful widget but I have three guest blogger, how can I mention three authors with this widget ??

    ReplyDelete
    Replies
    1. Just repeat the code three from here &lt!--GUEST BLOGGER WIDGET STARTS--&gt

      And replace the author name and details ;)

      Delete
  9. this is not automatic and I think. Could you tell me how to make it be automatic, I mean by using profil widget code?

    ReplyDelete
    Replies
    1. Hi Randy,

      It's automatic, Just follow the instruction one by one ;)

      Thanks for your comment.

      Delete
  10. Chan i would like to have an unique template with most of the features of a magazine template and i also need some guarantee like thing to make sure that you are always available to customize it....So how much will it cost

    ReplyDelete
    Replies
    1. Hi Hari,

      For query related to theme designing.

      Kindly Contact me using Contact form or email me at contact [at] blogtipsntricks [d0t] com

      Thanks ;)

      Delete
  11. Good and stylish multiple author bio widget... It really help bloggers in showing up on their blogs or websites..

    ReplyDelete
  12. Awesome Post bro.. I want to ask a question also want a widget i mentioned below..
    I have added auto author box, like you share above.. Now i received some guest posts and i want to remove my author box but not from all posts, i don't want to show my author box in guest posts..

    ReplyDelete
    Replies
    1. If you correctly followed the procedures given above it'll not show your author box in guest posts, So make sure you've added it correctly. :)

      Delete
  13. Hi I Followed your procedure.. I saved the template, I didn't get any error but the author Bio box is not showing. I don't know if its because of the template am using. Please Reply me when you have the chance..
    Here is my URL www.lautechparole.com

    ReplyDelete
  14. Hi, I followed the instructions and was able to get the widget to work for my guest authors but not my own posts (I'm the admin). You can view the site at www.naturallyflywilmington.blogspot.com. The site is still under construction, but you can see that the author boxes are on all of the posts except mine.

    ReplyDelete
  15. Hi I followed all the steps correctly but still It is not showing author box below the post please check our blog http://navatelanganajobs.blogspot.com/
    pls reply...

    ReplyDelete
  16. Hi There

    Thanks so much for this.
    Am having an issue with something, I copied the admin code thrice (cause there are 3x administrators) and it keeps picking up errors eg.
    Error parsing XML, line 1533, column 82: The value of attribute "href" associated with an element type "a" must not contain the '<' character.

    help appreciated

    my blog url is http://coolgreatandrandom.blogspot.com/

    ReplyDelete
    Replies
    1. Kindly Repeat the Process. The error message indicate that the link tag is broken. which means you've made a mistake while changing the links.

      So, Reinstall the widget it'll fix the problem :)

      Delete
  17. hey not working..can u help me to fix it :)

    ReplyDelete
    Replies
    1. Sure, The widget works fine.

      So, Kindly let me know what type of problem you experience :)

      Thanks

      Delete
  18. Not working in my template :( Will somebody help me please :(

    see my template: www.onlineitsofts.com
    Give solution by comenting on my blog please :D

    Thank y0u!

    ReplyDelete
  19. Nice one brother....its working this is great its really working see here www.liloloo.com

    ReplyDelete
    Replies
    1. Hey, your blog is pretty splendid. Did you use a template or design it from scratch?

      Delete
  20. Can you help. I am looking for a unique blogger template for my blog. My blog is regarding the guidance for jobs and hihger studies

    ReplyDelete
  21. Hello chandeep The code you provide is not working for me

    ReplyDelete
  22. I want to use this in a separate side bar and not at the post body footer. I tried to use this code but I can't get things to work properly. If I use this code without post.author conditional (meaning I evaluate the pageType to be item) then it works. No author on homepage but only on item pages. When I add back the post.author evalutation I get an error or no author box. Please help!! I would send you a beer money if you can help me fix. If I can't fix this I have to port all of my authors to WordPress or Drupal and I am so not ready to start over at this time.

    ReplyDelete
  23. I cant find the second html code in my html coding... :/

    ReplyDelete
  24. cannot find < div class='post-footer-line post-footer-line-1' / >

    ReplyDelete
  25. cannot find < div class='post-footer-line post-footer-line-1' / >

    ReplyDelete
  26. not working on my blog, or probably on my template. followed the exact procedure, code has been accepted too. but when one of my guest author posted, it is not showing author box below post. please help me

    ReplyDelete
  27. my blog is: www.ownworldinspiration.in

    ReplyDelete
  28. I It didn't work perfectly. if you don't mind can you edit my HTML template.
    Message me through facebook.
    Facebook:- www.fb.com/saifudeenhisham

    ReplyDelete

I Appreciate your valuable Feedback. So, Please DO NOT SPAM - Spam comments will be deleted immediately.

Don't use brand name in name field and you're not allowed to use links in comments unless it's necessary

Such Comments will be removed immediately.

Thanks,
Chandeep