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

  1. this would look so cool, but I couldn’t get it to work :(

    • 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.

    • 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.

    • I’ve commented again below with how I worked out how to do this, thanks so much for your post and help.

  2. 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

    • 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 :)

        • 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

  3. 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 :)

      • 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?

  4. Hi,
    Thank you for this tutorial but I couldn’t get it to work either. Maybe you can help me? :)

    • 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!

  5. 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!

  6. Hi! I try to round the photo on my About Me but it didn’t work. I don’t know what’s the problem that it keep appearing in the upper page. I need your help!

    I paste the code before the . Need your help.

    Thanks!
    Floe recently posted…[ Running Man ] Sweet success and Best teamwork.My Profile

  7. Thanks that was easy and effective looks great!!!
    zELDA bEHR recently posted…Shabby chic revamped JeansMy Profile

  8. 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!

  9. 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! :)

  10. Having trouble with this…it comes out as regular text across the top of my site. How do I fix it? Where exactly do I put the code, I can not find the </b…
    Thanks!
    http://sunniesandplanes.blogspot.com
    Paulina recently posted…What do Olympians wear?!My Profile

    • 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! :)

  11. darnit! mine did not work either, text the top left corner! but I wanted to say thank you because you did a wonderful job explaining it and your steps were so easy!!!
    Kylie recently posted…holiday decorations {belated valentine’s day}My Profile

    • 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.

  12. Kindly See, Please.
    Got In Square but not ROUND.
    Thank you and Regards.

  13. THANK YOU AGAIN, PLEASE
    ifinder recently posted…GOD – FinderMy Profile

  14. 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

  15. Hi! I love how this looks (and your whole blog!) but I can’t get it to work on mine! Looks great though :)

    Katie May xoxo
    katieemay.co.uk
    Katie Chesworth recently posted…Half Term HappeningsMy Profile

  16. I’m wondering how you got rid of the, “G+ cycle followers” sign that is automatically attached to the profile picture when you add the profile gadget.
    Sarah recently posted…Lush Fighting Animal Testing: Live Demonstration at Regents StreetMy Profile

  17. 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
    :)

  18. 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

  19. 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 :)

  20. for some reason, my image is stretched when i try the code? I don’t know what i can do!

  21. 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

  22. Thank you so much for this tutorial!! I have been wanting to do this for so long and you’ve saved me from buying a whole blogger template just to get it! lol
    Ellie recently posted…A little crochet catch-upMy Profile

  23. this is such a great tip!! Thank you so much!! So easy and it works perfectly. Great directions. Thanks again

  24. There’s an easy way – I just simply put the codes into CSS of my blog. Check it out. http://web-tag.blogspot.com – I get the same results…
    Patrick Ramos recently posted…Incredible Movie-themed Sand SculpturesMy Profile

  25. Hi! I couldn’t seem to do this at all :( sorry to be a pain can you assist at all please?

    I am new to all of this so I apologise

    Thanks!

  26. 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!

  27. thank you for posting this, it was so helpful!

  28. 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

  29. Thanks, took time to figure it out but worked. Thanks loads.
    Tashi chheten lama recently posted…Beat the heatMy Profile

  30. Hey need help, how do we put that about you below the picture. Whats the width and height of your photo?
    Tashi chheten lama recently posted…Beat the heatMy Profile

  31. I’m a beginner on blogging and when i found this, it really works!. thank you so much sharing.. hope to learn more from you, keep it up <3
    kryzzaesumaoang recently posted…ETUDE COLOR MY BROWS (browgel)My Profile

  32. This is FABULOUS. Thank you so much! :D xx

    Katy | http://www.littlemisskaty.co.uk
    Little Miss Katy recently posted…Foodies Festival at Clapham CommonMy Profile

  33. 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.

  34. Waleed Khan says:

    Uh… not working… i m not an IT person.. Can you plz make it more simple?

  35. 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 :)

  36. 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.

  37. Thank you so much! It worked out and I love the result :)
    Cris recently posted…Google Android LawnMy Profile

  38. That’s one way better than the old one!!!

  39. awesome thanks for the tips! I couldn’t get my profile picture to center though! I don’t know why. Can you help? :( I’d love to have it centered. Thank you!

    • 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!

  40. Hi – this post is great! I’ve been wanting to do this for ages, but I had no idea how to :) Thanks for a simple, straightforward guide! xx Sam

    http://sambanksbooks.blogspot.com
    Sam Banks recently posted…Follow Me Via Bloglovin’My Profile

  41. 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

Leave a Comment

*

CommentLuv badge