DIY: Make your Blogger profile image round using Picmonkey!

Hey guys!  As you probably noticed, I've been changing up my blog design a little.  It's taken some time but I'm really happy with the progress so far-and I've done it all myself.  Besides the new clean header, I think my new favorite feature is my round sidebar photo.  I tried a lot of complicated ways to get that photo through adding a special widget or altering the code, but then I figured out a much easier way to go from old square to new round.  When I figured this out I got really excited and wanted to make a tutorial on this my next priority.  So if you want to know how to make your profile image round, keep on reading.

Lets goooooo

Step 1, delete your current "about me" gadget.  Throw it out.  This gadget has a set structure linked to your google plus account, and is too hard to change to waste time trying.  Just go to your layout, click edit on your about me gadget in the side bar, and select "remove."

Step 2. 

Choose which photo you want, and upload it to Picmonkey.  The picture I used was previously a profile picture from Facebook, so it was already square.  If yours isn't already square, I would recommend making it that way with the cropping tool.  In Picmonkey, select the frames tab in the sidebar, then click "Shape Cutouts."  This is a new feature in Picmonkey, the one that makes this process so much easier!

Step 3.  Choose your shape!  You're not limited to round with this one, you could even choose a heart or hexagon-the choice is yours.  The important part here is to check "Transparent background" before continuing on your journey.

Step 4. Once your shape and background are in check, click back over to Basic Edits->Resize.  You''ll want to size this image down to about 250x250 px, give or take depending on your sidebar.  Then you're going to save your image-make sure it saves as a .png so the transparent background carries through.

Step 5. Head back over to blogger and open a new post.  Click into html mode and click the little image of a picture to insert a photo.  Click "Choose Files" and choose your file!

Blogger might not let you upload it the first time you try in html mode, so just refresh the page and it should work!  When it does, the "Choose a layout" menu will pop up.  Make sure to select "none" under alignment.  I don't think the size matters too much but I always keep it on "medium."

Step 6.   Click back over to compose mode, highlight the photo, and center align the photo.  This will put a tag of code that will center it when you transfer it to your sidebar.  In case you're curious, that line of code will look like this:

<div style="text-align: center;">

Step 7.  Click back over to html mode and highlight the code (see the tag I was telling you about?).  In another tab, open your blogger layout page

Click "Add a Gadget" on the sidebar and select "Configure HTML/JavaScript."  Paste the code from your (aligned) photo into the content box.  I wouldn't put anything in the title because that text will be in a set color and font, and won't be aligned with the photo.  Then click save, and save arrangement.

Step. 8-ENJOY!

And that's it!  I hope this was helpful to the fellow blog writers out there.  If you end up doing this to your blog, share it with me so I can check it out!  Until then, I'll see you in the next one.

Good luck, and have a beautiful day.