Add "About the Author" Box Below Every Blogger Post

Hi friends!! I found a lot of Wordpress blogs that include an "About the Author " box/widget below every blog post. So, I thought why not provide the same for the blogger/blogspot blogs. If you had closely watched my blog posts for the past few days, you will find the "About the Author" box/widget installed below every blog post. This new hack will definitely helpful all those bloggers who have multiple authors for their blogspot blogs. If you still have a small confusion about the widget, then have a look at this screen shot below.
about-the-author-box-for-bloggerI hope you are clear about the widget now. If you like to install this widget on your blog, then please follow the following steps.
1. Go to "Design->Edit HTML. Make a backup of your template before modifying the HTML by clicking on the "Download full template" link at the top of the page.
2. Search for the following line in your template. Use "CTRL+F" to fasten your search.
]]></b:skin>
3. Add the following piece of code just above the line mentioned in step 2.
.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}
4. Save your template and check if it is error free. Now, expand your blogger template and search for the following piece of code in your blog template.
<div class='post-footer-line post-footer-line-1'/>
5. Download the following text document - About the Author Widget For Blogger. Open the text document and copy the entire code in it. Now, paste the code below the line mentioned in step 4.
(Note: Please write about yourself instead of the following text mentioned in the document, "Write About Yourself/Fellow Blogger Here!!!". Also, add your twitter name instead of the following text "YOURUSERNAME".)
6. Save your template. The code will automatically appear only in the post pages and will not be visible in the home page. Just go check out your individual post pages and you will find the widget installed.

I hope you enjoyed this post!! For any help, please feel free to leave your comments here!! I will sort out any of the issue with respect to this hack. Also, try spreading this post to your friends if you feel it is worth spreading:)

Enjoyed the article?
Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

    Other Recommended Posts

  • Blogger Widgets
sam said on September 14, 2010 at 6:28 PM :

nice posting tahnks for sharing....

web design company noida
mlm software

REPLY
Find All Answers said on September 14, 2010 at 6:38 PM :

Thanks Mukund. Wish you posted it when I was at Blogger. I am passing this on to one of my friends who will use this.

REPLY
Mukund said on September 14, 2010 at 8:10 PM :

@sam: You are always welcome!! Keep up with the blog to receive more updates!!

REPLY
Mukund said on September 14, 2010 at 8:13 PM :

@Find All Answers: Lol!! Yeah!! Please do spread the word about this post if you feel it worth spreading. And let me know if your friend will join our blogging buddy group!!

REPLY
rotcais said on October 10, 2010 at 8:31 PM :

hye there mukund...i try this out and the picture that display besides about th author is ur pic.how to change that?pleasse try to look here http://wutlifeis.blogspot.com

REPLY
rotcais said on October 10, 2010 at 8:35 PM :

btw, sorry...i manage to fix it.but still the size is not right..hehe

REPLY
Mukund said on October 10, 2010 at 10:48 PM :

@rotcais: I'm able to see a cartoon picture there!! May I know what picture you want to show in that place there? I will help you solve the problem!!!

REPLY
Larry said on November 8, 2010 at 7:05 AM :

So, I have a question. What if I have more than one authors in my blog... can I create "author-box" for each one? thanks...

REPLY
Mukund said on November 8, 2010 at 10:09 AM :

@Larry: Thanks for the comment Larry! Yes! You can add this box to multiple authors as well!! You just need to paste the code below your post. Not in the template area but in the post editor section.

REPLY
sam said on November 12, 2010 at 4:00 PM :

nice posting tahnks for sharing....

web design company noida
mlm software

REPLY
seenu said on November 16, 2010 at 3:51 PM :

Your blog is intresting
helped to customize my blog a lot

Insted of pop-up window for comments why cannt u emmbed comment box at footer
............

REPLY
Mukund said on November 16, 2010 at 11:13 PM :

@seenu: Thanks for the comment! There is a bug with the template. So, if I enable the comment form, the comments do not get submitted properly. I received a lot of complaints. So, I still stick with the pop up window.

REPLY
Brent from The Naughty Book Kitties said on January 12, 2011 at 7:23 AM :

How do I get my own image to post in the "about the author" box? Rather than your cartoo image....

REPLY
Brent from The Naughty Book Kitties said on January 12, 2011 at 7:24 AM :

Re: last comment. Please let me know via email! naughtybookkittens@gmail.com

REPLY
Mukund said on January 12, 2011 at 6:42 PM :

@Brent from The Naughty Book Kitties: Sure! I will mail you the code, but send me the image URL or at least the image (your image) which you want to display!!!

REPLY
ICStarzz said on February 7, 2011 at 3:48 AM :

for some reason I don't have the code for #4.

so now I'm not sure where to put the downloaded code.

REPLY
Mukund said on February 7, 2011 at 6:30 PM :

@ICStarzz: So you need the code at step 4 ah? Email me and I will let you know. Any issues installing this widget, mail me!!!

REPLY
raj said on February 14, 2011 at 4:52 PM :

well this code did not work for me , i did not get the author box in the output, even after getting no error, what should i do now, please help earliest

REPLY
Mukund said on February 14, 2011 at 5:47 PM :

@raj: Did you check your post pages, that is individual posts? It will not appear on the home page. So, let me know if you can find them on post pages, else contact me via email!

REPLY
extremeleadprogram said on February 19, 2011 at 12:54 PM :

I just couldnt leave your website before saying that I really enjoyed the quality information you offer to your visitors... Will be back often to check up on new stuff you post!Anyways, here are some interesting links
HIGH QUALITY MLM LEADS

REPLY
Mukund said on February 19, 2011 at 10:04 PM :

@extremeleadprogram: Thanks for the comment! If you are really interested to get the updates, then I recommend you to subscribe to my blog. Hope you enjoy the upcoming articles on my blog!

REPLY
Blog Help said on April 12, 2011 at 9:20 PM :

Hello, very good info, I was searching for a long time for "About the author" tutorial. Thanks!

REPLY
Mukund said on April 12, 2011 at 9:41 PM :

@Blog Help: Thanks for the comment buddy! There is another updated version of this post. It provides the coding for adding info about authors for a multi-author blog!

REPLY
AbHi said on May 2, 2011 at 12:27 PM :

hi mukund. thanx for sharing the tip. I have a problem - How can i replace that photo avatar with my own pic ?
please tell me.

REPLY
Mukund said on May 2, 2011 at 12:51 PM :

@AbHi: Just replace the URL which points to my image. If you are not sure, then contact me via with your profile pic and I will sort out the issue!

REPLY
Author K.M. Johnson said on May 10, 2011 at 10:05 PM :

Thanks for the great posting, unfortunately I am having trouble finding the piece of code in step number 4. Also, After the first post and save, I do not see anything on the individual posts or main page...

REPLY
Mukund said on May 11, 2011 at 10:01 AM :

@Author K.M. Johnson: Yes! You will not find any changes in your template. That is just the CSS part. I told you to check whether it is error free or not. That's it buddy! Well, you can contact me via email and I will solve this issue. It's pretty simple!

REPLY
evil p0ptart said on May 12, 2011 at 5:53 AM :

Oh, and forgot to add that I want the multiple authors to only show when they post something and not have my box permanently shown with each post. Is that even possible?

REPLY
evil p0ptart said on May 12, 2011 at 5:53 AM :

Thanks for sharing this, but do you have an optional way to do it for multiple authors? I can't find any information anywhere on it.

REPLY
Mukund said on May 12, 2011 at 9:29 AM :

@evil p0ptart: Yes!! It is possible. May be you did not check my site properly. Well here is the link for adding multiple author info.
http://www.newbloggingtipz.com/2011/01/author-info-widget-for-mulitple-authors.html

REPLY
Andrelle said on May 15, 2011 at 1:39 AM :

wow it looks great on my blog thanks amillion for this widget. Have a look here

REPLY
Mukund said on May 15, 2011 at 10:21 AM :

@Andrelle: Yeah! I had a look at your blog. Perfect! I hope you enjoy the other articles on my blog as well!!!

REPLY
itsMAPF said on May 29, 2011 at 7:10 AM :

How about multiple authors? Does this work for it? Or just for a single author?

REPLY
itsMAPF said on May 29, 2011 at 7:13 AM :

Pls. disregard my previous comment. I already found the solution to my answer. Thanks anyway!

REPLY
Mukund said on May 29, 2011 at 2:31 PM :

@itsMAPF: Yeah! No problem! Hope you enjoy the upcoming articles on my blog!

REPLY
Aditya Samitinjay said on June 28, 2011 at 12:47 AM :

That sidebar with fb, twitter and plusone is quite irritating. Big thanks for the post though :)

REPLY
Mukund said on June 28, 2011 at 10:40 AM :

@Aditya Samitinjay: Did you mean the one that scrolls to the left? Thanks for the comment by the way!

REPLY
Anonymous

hello, just wanna know how to do it, because I followed the steps you've given above but I didn't see any "About the Author" in my blog site =(

REPLY
Mukund said on July 6, 2011 at 12:01 AM :

@Anonymous: Well, it should! Did you check out your post page? Please click on any one of your blog post - title and look for the widget! If you don't find one, I'm always there on gmail. Email me and I will fix your issue!

REPLY
Jeet Dholakia said on July 14, 2011 at 1:13 PM :

Hello,
a very nice widget and trick that i was looking for, but i am facing one problem i have followed all steps correctly but the author box is not coming properly.here is the snapshot.please help me in this.

Link : http://i960.photobucket.com/albums/ae87/jeetdholakia/Aboutauthor.jpg

REPLY
Mukund said on July 14, 2011 at 2:47 PM :

@Jeet Dholakia: I guess there's a problem with the CSS part! Just contact me via email with your template and state your problem clearly! I'll try to fix it up for you! Else ping me via gtalk!

REPLY
shan said on July 18, 2011 at 12:21 AM :

Mukund i have 1 more question, i need a comment box like your means a popup comment. Can u plz help me out. thanx

REPLY
Mukund said on July 18, 2011 at 12:34 AM :

@shan: If you need a comment box to pop out like mine, well its very easy to implement on blogger. Just navigate to "Settings >> Comments" tab and choose Pop-up window as your option for "Comment Form Placement". That's it! Your done!

REPLY
shan said on July 18, 2011 at 12:07 PM :

Mukund i need to put my pic on the avataar. how to do it. Its ur avataar that is being shown on my blog

REPLY
Mukund said on July 18, 2011 at 1:23 PM :

@shan: Just replace the image URL that appears in the img tag with your image URL. If you find it difficult to understand, then ping me via gtalk.I'll help you out! It's easy!

REPLY
NarenDran said on August 17, 2011 at 11:31 PM :

i added all this but about not showing in my blog..
my blog link :www.mobile-repair.org

REPLY
Mukund said on August 18, 2011 at 12:21 AM :

@NarenDran: Hmm! I would be happy to help if you had left the credits to my blog as such as the footer. Nevertheless, if you add them again, I would help you! Just ping me on gtalk!

REPLY
Anonymous

is there anyway I could do this for multiple authors? I have my brother also posting on my blog, we use different gmail accounts.. so if there was any way to do this please let me know.

REPLY
Mukund said on September 12, 2011 at 11:17 AM :

@Anonymous: Yes! It is possible! Just check out the article posted here - "Author Info Widget For Multiple Authors"

REPLY
Webrank said on September 17, 2011 at 2:13 AM :

Very useful post man.was looking for this.please take some time and visit my blog too.i would really appreciate it.

Blogger Tricks.

REPLY
Mukund said on September 17, 2011 at 12:54 PM :

@Webrank: Yup! I found you posted an article on your blog using the above codes! I would have been happy if you had linked my blog saying - source code comes from newbloggingtipz! Anyway, thanks for the comment!

REPLY
Amber * said on December 5, 2011 at 5:31 AM :

Handy Dandy little hack you have here! Thanks!

REPLY
ajmal said on January 15, 2012 at 10:03 PM :

Useful information to all blogger site owners mr: Mukund. Thank you very much

REPLY
John said on February 18, 2012 at 9:27 PM :

Hi looks great but in my blog there aren't any class='post-footer-line post-footer-line-1' can you plz help me!

REPLY
sonesh lakhani said on February 29, 2012 at 8:27 PM :

hey i like your post but how can i change the picture of author instead of cartoon??

REPLY
sonesh lakhani said on February 29, 2012 at 8:29 PM :

how can i change the picture of author

REPLY
Mukund said on March 1, 2012 at 6:03 PM :

@sonesh lakhani: Yes! It is possible! Just change the URL of the picture! That's it!

REPLY

Use the tab below to comment. No spam please!!!

[netinsert=0.0.1.11.14.1]