How to Configure the Profile Gadget

How to Configure the Profile Gadget in BloggerOur $15 Blogger templates are a great way to get a stylish blog look in less than a few minutes. One of the customizations included with our blog templates is a styled profile area. Styled means that we code the default Blogger profile gadget so it looks more custom and pretty.

defaultvsstyledWe’ve been getting a lot of questions lately from our $15 template clients about how to configure the about me gadget, so we thought we’d explain how to configure the profile gadget in a tutorial today.


Step 1: Add Profile Gadget

First you need to add the profile gadget to your sidebar. You do this by going to “Layout” and then clicking  “Add a Gadget.” Then scroll down until you find the “Profile” gadget. Click the “+” to add.

layout


Step 2: Make sure you are using the Blogger profile

Second, you need to make sure your blog is not linking to your Google+ profile or the gadget will not work properly and your photo will be blurry (see bottom of this post if you’d prefer to use the Google+ profile and want to fix the blurriness). This gadget works best with the Blogger profile (if you are already using your Blogger profile you can skip this step). To switch your profile to the Blogger profile, find the little gear button at the top right of your dashboard. Click it and then select the “Revert to Blogger profile” option. A pop up box will open and then click “Switch to a limited Blogger profile.”

revertYou’ll be directed to a new screen that says “Confirm Your Profile.” Click the “Continue to Blogger” button. Your blog will now be connected to your Blogger profile.

confirm


Step 3: Add about photo and text

Once you have your profile set to the Blogger profile, click on your name at the top right of your dashboard. A pop-up box will appear. Click “Blogger profile.”

profile

This page shows an overview of your profile. You can edit your profile text (the text that appears under your profile picture) here or you can click “Edit Profile” to make further edits and change your profile picture on the “Edit User Profile” page.

profile-1

To change/add your photo on the “Edit User Profile” page, scroll down to the “Profile Photo” section. This will allow you to upload a photo from your computer or you can insert the url to your image if hosted somewhere on the web. If you are not currently using a photo, click the “Browse” button. If you are currently using a photo and want to change it, click the “Remove image” button and then click the “Browse” button to find your new photo.

photo-browseIMPORTANT: Make sure the image you upload has been cropped to a perfect square or it will appear distorted.

PHOTO-SIZEIf you’d like to edit your profile text while in the “Edit User Profile” page, scroll down to “Additional Information” and find the “Introduction.” Add/edit your about text there.

profile-text

Click the “Save Profile” button at the bottom of the page and then view your blog to see your beautiful new styled profile area!


Fix for blurry photos if you’ve followed all of the above and your photo is still blurry

Blogger (as of 4/22/15) is now resizing all profile photos automatically to 80×80 pixels. It then blows the picture up and pixelates it. There is a fix. Go to “Template” > “Edit Html.” Click your cursor anywhere in the code box and hit Ctrl/Command + F to open a search box. Search for this:

</body>

Now paste the following code directly BEFORE that closing  </body> tag:

<script type="text/javascript">
var img = document.getElementsByClassName("profile-img");
img[0].setAttribute("src", img[0].getAttribute("src").replace(/s\B\d{2,4}/,'s' + '256-c'));
</script>

Hit “Save template” and the blurriness should be fixed. If not, let us know!


Fix for blurry photos if you prefer to use Google + profile

Go to “Layout” > “Add a Gadget” and add the “HTML/Javascript” gadget to your layout. Copy the below code in red and paste it into the gadget and click “Save.” Drag the gadget below all of your other sidebar gadgets and then click “Save Arrangement” to save your changes.

<script>
document.querySelector('.profile-img').src = document.querySelector('.profile-img').src.replace(//s[0-9]+/g,'="/s512");
</script>

Your profile image should now appear clear. This solution works in most cases but is not ideal. Feel free to leave comments below if you have any questions.
 

Premade Blog Themes - Designer Blogs
Posted by: Erin


Comments

  1. Claire says:

    I just bought one of your blog designs, and cannot for the life of me get my profile to appear under the “about me” section of the sidebar. I’ve gone through the steps listed here, but still, nothing appears. When I click on the profile widget box, it says configure profile, but I can’t click on it or anything. Any suggestions for how I can fix this?

    • Hi Claire,

      We just sent you an email in response to this. Fix for others having the same issue is to make sure you only have one contributor/user on your blog. If you have more than one contributor listed, the profile gadget will not know which of them to use and will not display at all.

  2. Amy Castillo says:

    Maybe I am missing it but I don’t see where the instructions above tell you how to make your profile pic a picture.

    Just a suggestion since the sample $15 blog I purchased showed a circle profile in place, that should already be on the template. I was expecting it as a customer. Thank you!

    • Because the profile area is a gadget, you have to already have the profile gadget added to your blog in order for it to automatically appear when you install your design. If you don’t already have the profile gadget added, then you’ll need to add it after install in order to have the profile area appear. Step 3 of this tutorial explains how to add your profile photo to the gadget.

  3. Hello,

    I used your tutorial and the profile picture does not fill the circle. Could you please hep me fix this problem. I don’t know what I did wrong.

    Thank you

  4. Maureen Merritt says:

    Thank you for your instructions. My profile pic is still a square and when I click on it the picture is blurry. What am I doing wrong? Thanks so much! Love Designer Blogs, have had my blog done twice by you!

  5. THANK YOU SO MUCH! I am so happy. For the past month and half, I have been going crazy trying to figure out how to fix my blurry picture. I tried following the steps to change the template, but for some reason I don’t have the “revert to Blogger profile” option. So I followed the steps to edit the HTML code and it worked! I wish I knew earlier to seek help from Designer Blogs because I spent countless days searching how to get my picture to look normal again. Thank you once again!!!

  6. My photo has been blurry ever since I put it in the this template. The circle has made it very blurry. I have tried all of the above tips bit none has worked, is there anything else I could try? And thank you for your lovely designs.

    • Hi Ophelia, I will have the designer of your design contact you directly to try to resolve the issue.

  7. elizabeth says:

    I am having the same issue as the above poster. I have tried everything and it is still blurry for me as well.

    • I will have the designer of your template get in touch with you to help you resolve the issue. She’ll be in touch shortly.

  8. I too am having the blurry photo issue still. Image is square, sized at 500×500 taken with a DSLR Camera. When I Ctrl+ F and type in it comes back 0 of 0. Thanks in advance for creating this page for help.

    • Try again. Your code will have the closing body tag . Once you find it, then copy/paste the code from the tutorial just before that and it will fix the issue.

  9. Perfect – this was exactly what I was looking for. Thank you!

  10. Cayte Brown says:

    This has a been a great tutorial! Thank you so much for your awesome blog layouts and amazing tutorials!!

  11. Aiko says:

    Thank you so much for your lovely designs all the helpful hacks! Totally loving the template I purchased!

  12. Jade says:

    Thank you so much! I spent so much time trying to figure this out. You had super easy instructions to follow and now my picture isn’t blurry 🙂

  13. Emily says:

    I followed the instructions for the picture (used perfect square), as well as edited the html so it wasn’t blurry, but the picture is a weird squished oval shape, not a circle. Any suggestions?

  14. U-Me-Life says:

    I’ve done everything, but my profile still isn’t showing up at all.

    • Do you have 2 users set as administrators? If so, the profile gadget won’t work/show because it won’t know which of the two to use. Set your blog to only have one administrator and then your profile gadget will show. Let us know if you have further issues.

  15. I dont have the little gear button…do we know why? I have seriously read this over and over and im getting to frustrated. Pleasee help

Speak Your Mind

*