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.

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!