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!


    • 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

        • says

          Hi I am just starting out with blogging and I found this post and your blog above incredible useful, so thank you! I am just getting to grips with it all and so far so good:)

  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'>

      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


    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.

    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

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

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


  11. says


    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?


  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

  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


    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, 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 (:

  22. says

    Thank you so much! Getting prepped to start a new blog, and this helped me a ton. HTML gives me a major headache, but I’m hoping I can get a handle on the basics for the sake of blogging.

  23. says

    Thank you so much! This looks so awesome! But i have a little problem, i can’t get the text box placed in the center under the picture, do you have an advice?

  24. says

    I’m a tech (on the non code writing side of things) and am loving learning how to blog and write code without bugging my co-worker developers. It actually combines two of my loves: design and technology. Thank you for the tip. My blog is such a slow work in progress but finding tips like this are rockin’ it! I’ll now try to add your attribute to this design!
    Kristin recently posted…Inside JobMy Profile

  25. says

    Hi! I love your site, and I’ve been looking for this tutorial everywhere. Sadly, I can’t use it – I use WordPress. Would you know how to make the image round in that platform? Thanks! :)

  26. says

    After a few tries I realized what I was doing wrong.
    My code kept popping up at the top, I tried only putting profile-img
    still it kept ending up at the top.
    then I saw a comment about making sure the code was before …I had been placing it before

    Now it worked!
    THANK YOU so much for this!!
    it was so easy once I realized what I had been doing wrong :)

  27. says

    Hi, i just started to blog and tried to play around with the template, it looks fab after trying what you taught. Thank you.
    But i have another question maybe you know how to do it? I want to make my profile pic with faded edge, what should i edit on my java script? :)
    Zoe recently posted…About me blogMy Profile

  28. says

    Thank you so much for the wonderful tutorial and helpful tips! I followed the tips in the comments above to remove the google symbol and link to my google profile but there is still a link that says ‘follow’ under my picture. Could you take a look and help me figure out how to remove that? Thanks so much again for the amazing, helpful tutorial! I absolutely love my rounded photo! :)

  29. says

    Thank you for the trick.
    I’ve tried your tutorial before but it doesn’t work, the code just showing up at the top of my page.
    For some reason maybe, but then i tried to put it above the ]]> not and it works well.

    Hope this will help, thank you. :)
    IMelda recently posted…Hati-hati Scammeromance BuleMy Profile

  30. Ric. says

    I’m just starting to create my own blog but it’s really complicated.. How do I put a picture of me on the sidebar under “About me” (like your round image)?
    Right now there’s only my Google+ profile pic and it’s really small and not a good quality and there’s this follow-button for Google+ which I also don’t want to have.
    Can you help me?

  31. kayla says

    I was able to get my photo rounded, however my photo looks stretched. I have tried uploading it in different sizes and it keeps looking stretched. How can I fix this? Also, I know how to add badges to my blogger (ex.pinterest) but how do I create the badge so it’s black? And then add an instagram one next to it?

    Thank you!


  32. says

    hi, i absolutely love your blog.
    thanks your help i was able to make my profile picture round and have used one your watercolour media icons on my blog.
    i have a little problem on my about me my name is overlapping with the blogger sign i have absolutely no idea how to make it proper. pls help xx

  33. says

    Hi! this was very simple and very helpful! I love it! Thank you so much! Just have one question. Is there a reason my picture looks blurry? I tried changing it but they all look blurry! Can you please help me!!!
    Maria recently posted…My suffering is small.My Profile

  34. says

    Hi rose, thanks for this good tip! It centered my picture and everything :) however once I made the picture bigger it became blurry, is there any way I could fix this? Thanks!

  35. says

    Hello, I am new at blogging and I’m trying to set it up. I was wondering how to change my picture round instead of square and I found your page but it seems to not be working for me and I’m not sure why. Could you help me? Don’t mind my picture I just put it there so I can see what it would look like before actually putting my permanent picture. Lol Thank you!!

  36. says

    After making changes, I went back to my blog to make the profile pic round and center the pic and text but center align isn’t working. I took a screenshot but I don’t see a place to enter it here.

  37. says

    Hi thanks for this — the easiest plan that worked I found on the WWW,
    Only thing is now my ‘page list’ tabs on the “navigation” bar have round corners too – how would I keep them square edged?
    thanks again

  38. Jackie says


    Great tips. Sadly this didn’t work for me! The odd thing is I have done this before using your code to an earlier template. I since changed my template to just the simple blogger template and for some reason this won’t work! It just adds the code in text at the top of my blog even if I put it before the thingy. It also won’t let me apply the CSS code in template. The apply button is shadowed out. What the heck???! Any tips would be greatly appreciated. :)

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