Author Bio Widget For Multiple Authors (for Blogger/Blogspot)

It ‘s not so encouraging accepting guest posts on a blog hosted on blogger because except from the author’s name at the top of the post, there’s no plugin to automatically display author’s bio below the post like WordPress. You need to manually write the bio along with the post while composing and it’s not so cool. If you recently started accepting guest posts, you need to manually edit those posts you’ve written previously just to make your bio appear on old posts.

This widget allows you to display author’s bio below each and every blog post, even on blogs managed by many authors. Each and every one still get full credit for their work. This widget style is based on the very one WordPress plugin I use on this blog and you can see the demo at doncaprio.blogspot.com. Check the latest posts there I made under different authors.

To get your blog ready for guest posting, you need to first send an invitation to the guest blogger by email.

- Go to Settings > Other

- Under Permissions, you should enter the guest blogger’s email

Upon acceptance, the guest blogger can then log in to your blog to submit the proposed guest post. Though I’m now using WordPress, I took some time to test out this on my old blogspot site to be sure it actually works fine.

Adding About Me / Author’s Bio Below Each Blog Posts

1. Go to Design > Edit HTML or Template > Edit HTML depending on whether you’re using the old or new blogger layout

2. Back up your template before proceeding you can easily restore it in case something goes wrong

3. Check the box labelled Expand Widget Template

4. Press CTRL + F on your keyboard and search for this:

]]></b:skin>

5. In the line just above this, paste this css style:

.dc-about-author-containter h3, .dc-about-author-containter p{
margin:0 0 10px 0;
padding:0;
}
.dc-about-author-containter{
background: #f2f7fc;
border: 1px solid #000;
clear: both;
margin: 20px 0;
overflow: hidden;
padding: 20px;
}
.dc-about-author-pic{
background: #fff;
border: 1px solid #e7e7e7;
float: left;
height: 100px;
width: 100px;
margin: 0 -122px 0 0;
padding: 10px;
}
.dc-about-author-pic img{
width: 100px;
}
.dc-about-author-text{
float: left;
margin: 0 0 0 140px;
}

6. We’re done with the styling, now let’s finish it up :)
We’ll be using conditional statements to display different about me widget for diferent authors, ok?

Search for this code in your template:

<div class='post-footer-line post-footer-line-1'/>

7. Just below that, paste the code in this text file:

Author’s_bio_widget_code

From BLOG ADMINISTRATOR WIDGET STARTS to BLOG ADMINISTRATOR WIDGET ENDS is for your own posts. This automatically displays your bio under your posts and you should edit all the characters in red as follows:

YOUR NAME – this is the name displayed under your posts as author’s name.

YOUR PHOTO URL – your photo URL should be here. You can upload the picture to your Picasa album and then use the URL.

ABOUT YOURSELF HERE – A brief description about yourself with links to your social network and all that.

Below is a demo of what it looks like:

author bio widget for different authors on blogger / blogspot

You should also fill the details for the guest author appropriately.

You should also repeat the widget for guest author each time you get a new author with new details. The number of guest author bio widget you have in your template depends on the number of guest authors you have.

Below is the example of the one I used at doncaprio.blogspot.com:

Author’s_bio_code_widget_demo

If you’re having any problem with this widget don’t hesitate to use the comment box and if it works for you, hit the google plus one button and say “thanks”!

Entry posted on. Filed Under: Blogger




Author: Don Caprio

Don Caprio is a full time blogger / web designer living in Nigeria and apart from blogging, my other obsession is music. I'm a self-confessed Tupac fan, an iOS lover, an Android user, a Windows 8 power user, a writer with a 5-year old unfinished novel... and the list goes on and on. You can add me on Facebook, follow my updates on Twitter or add me to your circles on Google+! You can as well grab my feed and get updates through email...

  • http://www.arewatech.com/2012/01/getting-free-blog.html Abdex

    Wow!! Realy impressed with this tutuorial, Thanks..May God Bless Ya.

  • mani

    i am getting this error… pls help…

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The content of elements must consist of well-formed character data or markup.

    Error 500

    • Don Caprio

      It’s fixed, Mani.

  • http://www.the-area51.com Jim Luthra

    Very useful if you receive guest posts. Thanks

  • http://gadgetsmaniac4u.blogspot.com Shanky Sahni

    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. XML error message: The content of elements must consist of well-formed character data or markup.
    Error 500

    please reply fast.I just got a guest blog request for my blogger blog.

    • Don Caprio

      I just realized my post editor is messing up the code. I just fixed it. It should work now.

  • mani

    thanks for your reply… but my blog doesnt show the widget. i have done exactly as you said. i need it at any cost, hlp me in any way. pls

    • Don Caprio

      You can let me take a look at your template.

  • mani

    should i mail you the whole template? or there is any other way?

  • Don Caprio

    Yes, just mail me the whole template. caprio[at]capriofiles.com

  • mani

    i have sent it… kindly see it

    • Don Caprio

      I checked just now and saw you sent the text file. Why not download and send the .xml file instead?

  • Armawn

    Thanks Caprio, yours is the only posts which made sense to me with regards to multiple authors author box in blogger.

    But here comes a problem. I can’t locate in my custom template, what I have is this:

    without “/” (slash). I still tried putting the code you gave BELOW this line, nothing happens. :(

    Please help! Many thanks!

    • Don Caprio

      You can as well paste it under <data:post.body/>

  • mani

    thank you for your help..:) kindly check this thank you post on my blog http://tech2mind.blogspot.com/2012/02/multiple-author-bio-widget-for-blogger.html

  • http://weknowgamers.net Liban Ali

    Hey there,

    Thanks for the tutorial! Just one problem, I did everything you asked however nothing appears under my posts on the site? I’m getting no errors either so what could have possibly gone wrong?

    • Don Caprio

      Did you use the right display name? “Liban Ali”? It won’t display if the right username in the code isn’t found on the post

  • http://www.welblogs.blogspot.in Naseef

    My question is how to add the box for guest author??
    I mean if i got a guest author,then i posted his article..but where i add his bio??

    • Don Caprio

      You only need to repeat the code starting from <!–GUEST BLOGGER WIDGET STARTS–> to <!–GUEST BLOGGER WIDGET STARTS–> for every guest blogger you have.

  • http://www.welblogs.blogspot.in Naseef

    but where i add that bro??

  • http://www.odishajobs.in/ Ardhendu

    Hello Don
    I want to add this widget in my blog http://www.odishajobs.in. Can you help me about this. If you want to help me just msg me on admin[at]odishajobs.in so that i can send you the xml file.

    Regards
    Ardhendu

    • http://www.doncaprio.com Don Caprio

      You can let me have a look. caprio (at) capriofiles (dot) com

  • http://www.tricksnhacks.in Utsav

    nice i really waned this
    thanks for share

  • http://www.rdgsmith.co.uk Robert Smith

    Hi Don,

    Really great widget idea. Just having a few problems..

    At first I got the XML Error Message. Then I tried pasting the Administrator Widget code under . This is well formed, but the ‘About The Author’ box just doesn’t show up on the posts.

    Can’t see what I’m doing wrong at the moment.

    The site is at http://samplerdgs.blogspot.co.uk/

    Thanks!

  • http://slimwares.blogspot.com/ Derek

    This worked for me Buh How Do i do the guest stuff..
    Won’t it randomly pick guests stuff

    • http://www.doncaprio.com Don Caprio

      You only need to follow the guide and change the author’s name as explained.

  • http://tommiekiddy.com Tommie K

    Thanks for the tutorial is there a way to remove “add this widget to your blog” text ?

  • http://ilavph.blogspot.com/ mikan

    hi i’m having trouble with this code

    there’s no such codes in my template

  • Shehu Awwal

    PLS THIS THING DID NOT WORK ON MY BLOG OOOO, I NEED IT BADLY THANKS, SHEY MAKE I SEND THE FULL TEMPLATE TO YOUR MAKE YOU HELP ME DO AM, THANKS

  • http://Learnonly.com LearnOnly Heart

    thnaks for the widget

  • http://www.techjay.com Derek

    I did the author name..
    Still didn’t show up

  • http://www.techjay.com Derek

    Sorry It finally worked

    • http://www.doncaprio.com Don Caprio

      I see that. Thanks for removing the credit though :)

  • http://gomsba.blogspot.com/2012/06/day-5.html Joshua Lagan

    How do you adjust the size of the grey box around the picture as in the post shown. http://gomsba.blogspot.com/2012/06/day-5.html

    • http://www.doncaprio.com Don Caprio

      I think the best way is to reduce the padding around the image. You can change this code:

      margin: 0 -122px 0 0;
      padding: 10px;

      to something that looks like this:

      margin: 0 -122px 0 0;
      padding: 0px;

      I only changed the padding to zero. You can adjust it to 2, 4 or any number that suits you.

  • http://www.topfurtive.co.cc KRUNAL INTWALA

    HIII
    HEY I JUST LOVED THIS POST. BUT CAN YOU PLEASE HELP ME WITH THIS.

    I HAVE TWO CODES OF “” IN MY TEMPLETE. I TRIED TO PASTE THIS CODE BEFORE 1ST “”, BUT THAT RESULTED IN SHOWING AUTHOR INFO BEFORE THE POSTS AND WHILE TRYING WITH 2ND ONE DOES NOT DISPLAY AUTHOR’S INFO. PLEASE CAN YOU HELP ME WITH THIS. CURIOUSLY WAITING FOR THE REPLY.

    THANKX.

  • http://pratiknayek.blogspot.in/ Pratik Nayek
  • http://pratiknayek.blogspot.in/ Pratik Nayek

    Bro i am putting up the codes at the right places on my blog ,but no improvements !! do you have an opinion…

    • http://www.doncaprio.com Don Caprio

      The author bio won’t show up if the author name in the bio code doesn’t correspond with your display name.

  • http://www.the-area51.com Jim luthra

    Thanks for the widget, I was searching for it since long.

    • http://www.doncaprio.com Don Caprio

      You’re welcom, Jim. I checked your blog and like the template. I looked so much like a professional Worpress blog :)

  • Esther

    Thanks for this! I’ll most likely use it.

    I was wondering–in the blog that a friend and I post onto together, would we be able to just double the blog administrator widget? Because we’re both administrators.

    Thanks for your help.
    Esther

    • http://www.doncaprio.com Don Caprio

      You’re welcome, Esther. Yes, that’s possible, so far you both have different display names.

      • Esther

        Good! I’m glad. Thank you very much.

        Esther

  • http://www.wonarts.com Ganesh

    thanks its working ………….

  • http://zulumuscle.blogspot.com Eugene

    Thanks man I’ve wanted to put an author bio box at the bottom of posts for a while, and I am considering taking guest posts soon so this was a big help. I shared this on G+

    • http://www.doncaprio.com Don Caprio

      Hi Eugene,

      I checked your blog now and saw the widget there. Glad you like it.

  • http://www.dynamictrick.in Daksh

    thanks for this widget i was founding for this widget.

  • http://tipstechs.blogspot.in Vishnu Bhatt

    really gonna try.Thanks Don Caprio… :)

  • http://ivfroad.blogspot.com/ Josh Cintron

    Worked like a charm. Thanks for the tutorial. I’ll be back to check out more of your stuff. ~Josh

  • http://www.ultimatechgeek.com Vishnu

    cool widget going to apply it in my blog.Thanks don..Keep sharing..

  • http://science-techvilla.blogspot.com kingsley

    Thanks alot for the tip Don, awesome work you’re doing here. Gona apply it asap!

  • http://askyourhow.blogspot.in/ Arshdeep Singh

    Hi, I did everything correct no errors on applying code but still nothing appears also names are also correct what can be the reason?

  • http://www.softsparkz.in ashfaq

    bro its not working i have try many times bro plz help me i can see this type code in my templet your have this type i try even repeated 3 code placed but not working i mail my templt if solve you bro.