How To Make Your Blogger ‘About Me’ Profile Picture Round

In case you don’t frequent the internet often, I’ll let you in on a secret. Round profile pictures are all the rage these days. They look pretty cool, and they’re a nice change from the standard square profile pictures that social media sites have made the norm.

But of course you already knew all that, which is why you’re reading this post, right? If you’re ready to change your boring ol’ square avatar on your Blogger-hosted blog to a round one – without any photo editing! – read on.

How to make your Blogger 'About Me' profile picture round

The example is a friend and recent blog design client of mine, Shades of Teebee. I created the template from scratch, including the customised ‘About Me’ widget. It’s easy to customise pretty much any of the widgets in Blogger with a bit of simple CSS coding. Let’s get started!

Step 1. Go to your blogger dashboard, click ‘Template’, then the ‘Edit HTML’ button. Find where it says <b:skin>…</b:skin> and click the arrow next to it to expand the template code.

How to make your Blogger 'About Me' profile picture round

Step 2. Using Ctrl+F (Cmd+F on a Mac), find </b:skin>. A couple of lines above it, paste the following code:

.widget.Profile .widget-content>a img.profile-img {
min-width: 80px!important;
min-height: 80px!important;
max-width: 80px;
border-radius: 40px;

}

Change the min-width, min-height and max-width number values to change the size of the image.

The border-radius property is what makes the picture round. You can change this value to get different effects, like rounded corners instead of a circle. The higher the number (up to half the image width/height), the more rounded it gets. Try it out!

Step 3. If you want to center the profile photo and text underneath (like in the example above), add the following code underneath:

.widget.Profile .widget-content>a img.profile-img {
float: center;
}

.widget.Profile {
text-align: center;
float: center;
margin: auto;
}

Step 4. Click the “Save Template” button and enjoy your new round profile picture!

Comments

    • everylittlepolish says

      Hi Loz, I just had a look at your blog and for some reason the code is appearing as plain text in the blogger bar at the top of your page… Make sure you’re pasting the code before the </b:skin> tag, not after it.

    • says

      It will only work if you have first added the profile gadget to your blog. Go to “Layout”, “Add gadget” and then add the Profile gadget. Then try what is mentioned above. Took me an hour to figure that out.

  1. says

    Thank you SO much for this. This is fantastic and I have done it (despite having no clue about IT). I found your site yesterday and have already added your watercolor social media icons to my blog. Now i really need a nice header like yours but I dont know how to make one. Maybe you might consider doing a post on it? Thank you again. Tor xx

    • says

      ps. I forgot to ask, on my ‘about me’ there is the annoying g+ thing with my profile name. Is there a way of removing it? Many thanks

      • everylittlepolish says

        Hi Tor, thank you for your kind words! The round profile picture and watercolour icons look great on your blog :) I’m so glad you like them. I like your header! What exactly did you want to know about how I made mine?

        It’s a little bit trickier to remove the g+ icon next to your profile name, but here are the steps. Before you start, make sure you create a backup of your template in case you accidentally delete something you didn’t mean to. (You can create a backup by clicking the Backup/Restore button in the top right of the Template page.)

        1. In the “Edit HTML” screen, use Ctrl+F to find the widget named Profile1. Click the arrow to the left to expand it, and expand the part that says b:includable as well.

        2. Scroll down a bit until you see <a class='profile-name-link g-profile' expr:href='data:userUrl' expr:style='"background-image: url(" + data:profileLogo + ");"' rel='author' rel="nofollow">. What you want to do is remove the expr:style='"background-image: url(" + data:profileLogo + ");"'.

        3. Next, scroll back up to the top, find the b:skin tag and click the arrow to expand it.

        4. Use Ctrl+F to find /b:skin, and a couple of lines above it, paste the following code:

        .profile-name-link {
        padding-left: 0px;
        }

        5. Click “Save Template” and the g+ icon should be gone :)

        • says

          Hello! Thank you for looking at my blog! I took inspiration for my banner from you and had a bash at making it using photobucket. It’s not too bad is it?! Before I just had the name using one of the blogger fonts and it looked terrible! Your blog has inspired me. Thank you! I have added a link to your site under ‘my favourite blogs’. Thank you for your help with my ‘ps’ query above. I will now give that a go! Thanks again. Tor

  2. says

    Hey, Rose, maybe you could help me out?
    I have a few problems with my “About Me” section:
    1st – I have this slight border on my profile picture, is there any way to remove it?
    It doesn’t appear in any other image.

    2nd – Under my image appears my name with the blogger symbol before it and it also appears “View my complete profile” at the end. Is there any way to remove all this? Both the name, the symbol and the complete profile thing?

    Thank you!
    JOANA recently posted…I’m a year older!My Profile

    • everylittlepolish says

      Hi Joana,

      1. I can’t see any border around your profile picture, and the CSS code isn’t showing anything. It might just be your browser being weird.

      2. That’s a bit trickier to do, but here are the steps. Before you start, make sure you create a backup of your template in case you accidentally delete something you didn’t mean to. (You can create a backup by clicking the Backup/Restore button in the top right of the Template page.)

      Step 1. In the “Edit HTML” screen, use Ctrl+F to find the widget named Profile1. Click the arrow to the left to expand it, and expand the part that says b:includable as well.

      Step 2. Scroll down a bit until you see
      <a class='profile-name-link g-profile' expr:href='data:userUrl' expr:style='"background-image: url(" + data:profileLogo + ");"' rel='author'>
      <data:displayname/>
      </a>

      Step 3. Delete that whole block of code.

      Step 4. Then scroll down a little bit further until you find <data:viewProfileMsg/>. Delete that as well.

      Step 5. Click “Save Template” and your profile name, symbol and link should be gone :)

      • says

        Amazing tips, even for the technologically challenged! Thank you so much. I created a separate “About Me” in Pages. How do I link my circular profile photo to this more detailed page that appears in my horizontal navigation bar?

    • everylittlepolish says

      Hi Lynn, it looks like it didn’t work because your “Meet the Author” widget isn’t actually inserted in your sidebar as the official Blogger Author widget. You’ll need to use the official Blogger ‘About Me’ Author widget for this code to work. Hope this helps!

  3. says

    It took a bit of doing and playing, but I got my profile pic rounded as you have here. I left you another comment about suggestions for my blog. I am loving my new round pic!

  4. says

    Hello Rose

    Your post is very helpful :)

    Now I have a round profile photo, which I enjoy more, though it doesn’t look as great as yours, because the text is not centered underneath the pic. Could you, please, give me a hint on this?

    Also I tried to remove only the “B” icon near the profile name, using the information from the previous comments, but it didn’t work. I need some help.

    Thank you!

  5. says

    Tried posting the code exactly where you mentioned and still came out as regular text across the top left of the website. Even tried the ” .profile-img {” like you mentioned above and I still can’t seem to make it work. Please help! :)

    • everylittlepolish says

      Hi Paulina, I can see two issues that may be causing this problem:

      1. It looks like your “About Me” widget isn’t actually inserted in your sidebar as the official Blogger Author widget. You’ll need to use the official Blogger ‘About Me’ Author widget for this code to work.

      2. Are you looking in the “Edit HTML” screen? It should look the same as my screenshot in Step 1. If you’re having trouble finding the </b… , try doing a search for it by clicking inside the window with the code in it, pressing Ctrl+F (or Cmd+F if you’re using a Mac) and searching for it with that.

      Hope this helps! :)

    • everylittlepolish says

      Oh no, I’m sorry to hear that! I have no idea why it keeps happening :( Have you double checked you’re pasting the code before the </b:skin>, and not<b:skin>? (Note the forward slash in the correct one.) Also, have you tried substituting the first line of code with .profile-img { ? That worked for some people in the comments.

      Hope this helps Kylie! I’m glad you found the tutorial easy to follow, even if it didn’t work the first time.

  6. says

    Hey!

    thanks so much for posting this. really appreciate it! I’m new to blogging and just getting started with my profile. I copied all the code and place it as you mention. 2 things:
    1. my profile photo looks stretched and distorted now that its round. how do i fix that?
    2. i cant get the “view my profile” to be centered underneath the photo.

    thanks!!
    sotiria recently posted…The BoyfriendMy Profile

  7. says

    I figured it out… rather than editing the HTML code, instead try this

    Got to TEMPLATE, Customize, Advanced, Add CSS (it right down the bottom of the list).. then I simply added the two lots of code from the post above. you can see the picture changing right in front of your eyes.. I changed all mine to 220px to make it bigger… when happy, click APPLY TO BLOG.

    My photograph is perhaps a little narrow… when in the Add CSS page, my photo looks perfectly round, but on my blog it had slight straight sides, so for this reason I made is a rounded edged square instead. (border radius 70px)

    Thanks so much for this post! And I hope this might help some of you
    :)

  8. says

    Hi,
    I am brand new to all this blogging and HTML stuff but I have almost managed to complete my page apart from this bit. I wanted to know how you get your own design as your picture. I have done mine using the HTML gadget however this hasn’t allowed me to add a caption.
    is there any easier/ better way of doing this?
    ( i’m using blogger)

    Thanks, Tom
    Tom recently posted…My First Post!My Profile

    • everylittlepolish says

      Hi Tom, if you’re using the HTML gadget you should just be able to write your caption underneath the image HTML code. Otherwise you can add a separate text gadget underneath it and write your caption in that. Hope this helps! -Rose

  9. says

    Thank you so much for this tutorial! I have NO experience with HTML coding and was able to easily follow your directions to change my profile pic. Just one quick question….you have a very perfectly round profile pic and I have tried to change the values to achieve this but my profile pic still looks slightly square with a faint white border around it. Can you tell me what px’s you used for your min-width, min-height and max-width and border-radius?
    Many thanks again!!!!
    Erin

    • everylittlepolish says

      Hey Erin, thank you for your kind words, and I’m glad you found the tutorial helpful! The reason why your profile picture is looking like that is because the photo you uploaded as your blogger profile picture has a white/light grey border around it. Re-upload a photo that doesn’t have a border, and you should get a perfectly round image :)

  10. says

    Hey Rose,

    I can’t seem to get this to work, I added the codes above the however when you look at my blog it shows the coding I entered in black at the very top of the page, it has not changed my profile at all?

    Please would you be able to check it out?

    Thanks

  11. says

    Hi,

    Thank you so much for the code!
    It only worked when I added the Profile widget to my page but then it had the Google + Followers link directly beneath my rounded picture.
    Do you know how to get rid of this?

    Thanks!

  12. says

    Thanks so much for this post! It took me a little while to figure out how it works, I just couldn’t get my picture to be perfectly round. But then I noticed that all of my pictures on the blog had a white border. I removed it and finally got my round profile pic. So happy with it! :)

    xoxo Xenia
    SUMMERBERRIES

  13. says

    Hi, I’ve just noticed a problem with my profile pic. Came back to your website to see if anyone else had the same problem in the comments and realised yours is doing the same:

    The text of my profile is centred but the actual image is slightly off to the left. You can see it very clearly on my blog (link above).

    Any chance you know how to fix this please? It’s really getting on my nerves haha!

    Thanks :)
    Little Miss Katy recently posted…Eat My ShortsMy Profile

    • everylittlepolish says

      Hi Katy, sorry for the delay in getting back to you! I just went to have a look at your site and your profile image looks centred to me, so I’m not sure if you managed to fix the issue :) As for mine, I purposely set it to the side so the little floral embellishment would fit in the sidebar.

  14. says

    Hello,

    I am the definition of amateur blogger. I am new to the whole blogging thing and am in desperate need of your help. Stupid question, I know, but..how do you add text and a picture to the blogger official about me gadget so that I can make my picture round as you did above.

    Any help would be great!

    Thanks :)

  15. says

    Having trouble, it says the codes is not right and I have copied it twice to try, I’m in the right place for editing my HTML codes but it’s not working, I don’t know what to do.

    • everylittlepolish says

      Hey Alannah, it looks like you’ve got some extra code in your theme that’s causing it to be slightly off center. At the end of the code you pasted to make your picture round, add ‘margin: 0;’ (without the quotation marks), before the close bracket. Hope that helps!

  16. says

    Hi Rose! I love your social media icons! They’re so pretty! I’ve already added them to my blog! I have two questions, is there a way to make them smaller? Maybe I did something wrong but they’re huge on my blog! Second, I tried to follow your tutorial to change my blogger profile picture, but it didn’t appear to work! I’d love your input! Thanks so much!
    Yalanda @ Laugh Anyway recently posted…Friday Round UpMy Profile

  17. sam says

    (Please forgive the capitals in my name and email. I don’t know what is up with my keyboard)
    Thank you so much for this post! Not only was the original post super helpful, but also the advice you gave in the comments! Now, I have a question that is probably super obvious but certainly has me stumped. In the “About Me” gadget on blogger, how do you add actual text? I tried clicking edit in the layout menu, but that only gave me the option of showing or not showing the gadget. I would like to be able to write the sort of introduction that you have, but I can’t figure out how.

  18. says

    Thank you so much for this tutorial, it was so helpful! But how can i make my about me “description” below my photo instead of above it? Thank you!

  19. says

    Thank you so much! Your instructions were so easy to follow! It didn’t work for me at first, but it was only because I pasted it in front of the wrong b-skin code. :)

  20. says

    Hi Rose!
    I love this tip! I also have your watercolour galaxy social media icons in my blog! I’d like to know how to do the hover effect like the ones that you use in your blog! ;-)
    Thanks, Silvana

  21. says

    Hey there Rose,

    Thank you so much for all your great tips. I just recently started blogging. Im from Portugal and I’ve been using your guidelines (making my profile pic “ound” and the social media templates). You have have been a great help (:

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge