Author Bio Box (Blogger)

First of all, what do I mean by an author bio box? An author bio box is an area at the bottom of your post that describes who the author of the post is. They typically contain a profile picture, you username, and a description about you. To keep things simple in this tutorial, we’re not going to include social media links or tabs.


Going into your template won’t be that scary and I’ll have lots of screenshots below to step you through the process :) That way, you do it once and are set for all your posts!


This is the CSS that makes your author box all pretty. I’ve set the background of the box to be a light grey, but if you want to change that, just look for the #F7F7F7 (first line) and change that value to a color you want. I’ve also included CSS below the main CSS box if you want your author box to have rounded corners. If you’re not sure how to add CSS, follow this post.

Add this CSS as well if you want to have rounded corners:

The font for the author name heading will adjust to whatever font you have set to h4 CSS.


This is the step where we’ll add your profile picture, name, and description to the HTML below. I’ve written in all caps where you should place your text. Don’t delete any of the greater than or less than signs and make sure you don’t delete any of the double or single quotes.

Items to fill in below:
1. image link
2. your name
3. description about you


If you have co-bloggers, all you have to do is change the username value in the box below and paste in another author box right below the first one with a different username.

If you’re not sure what your username is, go to and your username is written in the top right corner.

Items to fill in below:
1. username
2. image link
3. your name
4. description about you

Adding Box to the Template

If you don’t know how to get to your template, just go to Blogger > Template > Edit HTML (Button)

First step is to click inside the HTML edit box and then on your keyboard press Ctrl + F. This will pop-up the search box in the upper right corner of your HTML edit box.

click image to view full size


Then in that search box, you need to type:

If you can’t find anything with that, try:

Press Enter twice so that you arrive at the second instance of the search.


Now if your code doesn’t look similar to my code above, you may have a custom template that is different than most Blogger templates. Even if it’s different, it’s important that you find the tag name we just searched for. If you can’t find it, let me know in the comments and include a link to your blog.

Our last step is simply to add our author box to the template now that we’ve found the right place to put it. Just place your cursor right BEFORE that post-footer tag and paste in your author box HTML. Here is how my code changed after placing in the author box:


Once you’ve pasted in the author box, make sure to save! Then you can go into one of your posts and check out your cool new author box :D

Remember, if you have questions as to why your author box isn’t working, INCLUDE A LINK TO YOUR BLOG! I’m tired of asking for blog links all the time :/ (failure to comply may result in sarcastic responses from me)

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

53 thoughts on “Author Bio Box (Blogger)

      1. I am late to this post, I found the section that says Author Box, and I was able to change the description for it on my custom template, however, it changed all the descriptions for each author (2), Victoria and CJ. I would like to add a separate description for Victoria. Also have a contributor whose author name appears different on the site and is unclickable at the top in the “by author name” section of each post (CJ). this I can’t find or fix or figure out how to make their “by author name” clickable on the site. Please help me.

        1. Make sure you’re using my HTML in this post and not what you had in your current template. I can’t help you with someone else’s code. There is a co-blogger author box html in the post above.

  1. I really love the look of your blog. I have a question for you. How do you put the instagram gallery at the bottom of your page? I’d love to do something like for my self-hosted WordPress blog, but I have no idea how. Do you have any tips for me?

    1. What are you putting in for the username? The only two places this could go wrong is if the username is not correct or the HTML isn’t being put in the right place (second instance of that tag).

      If you don’t have a co-blogger, try this code that doesn’t require a username:

      1. Thank you now it works perfectly. :) Wish you could do a tutorial to change the older and newer posts to number page navigation. :D

  2. Heyyyyyy… So, this is not post related or anything, but would you, being the kind and generous person you are (totally not buttering you up there) happen to share with me how you get that line behind your widget titles? On blogger though. I’ve been searching everywhere for a tutorial but I can’t find one!

    1. Lol. The CSS for that is kind of complicated actually. There’s an easier way though that might be easier for you to implement on Blogger. What you would need to do is get an image of a long grey line (1px in height) and place it as the background to the .widget css(no-repeat, background-position: 0 20px;) and add text-align: center; to the .widget css. That will get you the line behind the gadget, near the top. Then for the .widget h2 CSS, add display: inline-block;
      background: white;

  3. Hi Stephanie,

    Thank you so much for creating a walkthrough tutorial for these – I’ve been having trouble trying to find one anywhere!

    I’m trying to set these up on a blog with multiple authors and have entered the first code (for my own posts with the username Erin) but am unsure why the box isn’t showing up. Would you be able to help?

    The blog is

    – Erin

  4. Thank you oh so so so much! After my looooooonnng search I finally found the steps that actually work. You don’t know how much you helped me! Thank you. More powers! xoxo

  5. Hey Stephanie!

    Nice tutorial! Your blog is so beautiful.
    I’ve tried to do all the steps, but my template doesn’t have the second instance of that post footer code. So, my blog haven’t got the author bio box.

    Can you help me, please? Thanks!

    1. Looks like you have a very custom template. I couldn’t even find the post footer tag when I searched through the Inspector. Did you add in your share buttons or is that just javascript? Maybe try searching for class=”share-buttons” or class=’share-buttons’

      That’s the class name of your share buttons in the post. That area looks to be where your post footer is.

    1. You have a post-footer so I don’t think that’s the problem. I took out the username part of the code since you don’t seem to have a coblogger. Try this:

  6. Hey, Stephanie.
    This tutorial isn’t working for me for some reason.
    My link:
    I added in the long CSS text in the Add CSS on my blogger template. I was looking for the text in the template (the footer one), and I couldn’t find it. I don’t think I have a custom template, though.

    (You can also email me the reply at

    1. Ya, looks like your footer has a different name. Try searching for:

      if nothing on that, try:

      Then try pasting your author box below that line of code.

    1. Looks like you have a custom template because I don’t see div class=’post-footer’ in your HTML.

      Instead, try searching for:

      or if you find nothing, try:

      You should see something like this:

      try entering the author box AFTER that block of code.

  7. Hi Stephanie, i loved this post however i am still struggling with the author box. For me an author box came with the blogger template i downloaded and i wanted to get rid of it which led me to your blog post. As you can see (when you open the link to my recent post) at the end of it the there is an author box there that has my name on it but the picture is not mine and also it has forgien writing in it: ‘Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massa’. Can you please help me change it so it will be personalized to my information or get rid of it all together?
    Amarachi (- Miss.AUC xo)

    1. Trying going into your template (Blogger > Template > Edit HTML (Button))

      Then search for:

      if that gives nothing, try:

      You should see HTML that looks like the following:

      Looks like the author name is good, so don’t change that. What you’ll need to do is delete this link:

      and replace it with a link to your profile image. Then delete “Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massa.” and replace with your description. For the social icons, put your social media link between the quotes where it says “Facebook link goes here”. If you don’t want that icon, delete from

    1. Hi Jamie, make sure you’re not deleting any of the double quotes in the HTML. Can you fill in your values for the box HTML and then paste it here so I can double check that everything is filled in correctly?

  8. Hi,
    I almost gave up on putting a Author box then I saw your site.. your instructions are easy to follow not as frustrating as the others.
    I have an issue, after I’ve copied and pasted as your instructions. The author box still does not appear.
    Hope you could help me on this. Thanks.

    1. Hi Maria,

      I’ve checked the code on your site and I’m not seeing the box HTML in there… I wonder if maybe you pasted it in the first instance of the post-footer class and not the second. To double check, can you go back into your template and try pasting in your author box HTML in all instances of your post-footer class that you find?

      1. Ms Stephanie,
        Thank you so much!!! Now its working …Loving it.
        BTW if we need to add some social media links to the box how to we go about it?
        Thank you!