Fix a Blurry Blogger Profile Photo

UPDATE: There’s quite a few tutorials out there on the web with a script code that stopped working. Below you will find a solution that has been tested and works as of August 1, 2015.

Here’s a quick and easy fix for a blurry blogger profile photo.

The issue:

Blogger recently changed the default profile image size to 80px by 80px. If you have a custom blogger template chances are the designer has scaled the profile photo to fit the sidebar. Our Blogger templates such as Sara Davis or Always + Forever, use a blogger profile photo size of 250px. So what happens when 80px is scaled to 250px? A stretched out, blurry mess is what happens.

The fix:

It’s simple, all you have to do is add some code to an HTML/Javascript gadget in your sidebar or footer.

blurry-blogger-before-after

Here’s how:

Go to Layout and click “Add a Gadget” in either your sidebar or footer. Locate the HTML/Javascript and click the plus sign. Once the HTML/Javascript gadget window opens, copy the code below and place it in the text box area. Leave the title BLANK, so this gadget and code remains hidden, but working in the background.

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

Click save.

We recommend placing the HTML/ below your profile photo gadget in the sidebar.

For more tutorials, tips and tricks, be sure to subscribe to our email list.