Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Sunday, January 23, 2011

Blogger Header Image Size/Blur Fix

Spoken by at 3:54 AM
I have no idea what's going on with Blogger's development team. But apparently, there seems to be some huge bugs being left here and there. The latest one comes in the form of header images. When you upload a header image to Blogger (or Picasa Web Album), it will either be small or blurred. You can fix this by hosting your header image elsewhere. If you know how to do this, go do that, and stop wasting your time here. Because that is exactly what I'm going to show in this post. Let's cut to the chase and see how to fix this shall we?


UPDATE: It seems like this problem has been resolved now. But you can always keep your header image hosted elsewhere, just to play safe.

Step 1:

Make sure you have a copy of your header image in your computer. If you don't have a copy of your header in your computer, follow the steps below. If you do, skip to Step 2.

If you don't have a copy of your original header image in your computer, you can retrieve the one that you have uploaded to blogger.

Go to your Picasa Web Album. Login with your Blogger account if you have to. Then, click on your blog's album. Unless you have more than one blog, you will only see one album.


Now you will see a set of images that you've uploaded to Blogger server. Find the image that you have used for your header. Click on it.


Click on Download - Download Photo to save your original header image to your computer.


Step 2:

Go to an image hosting site like photobucket or imageshack. I'll be using imageshack in this tutorial as you can upload images there anonymously (you don't have to signup to use their services).

Click Browse - Choose your image - Upload now.


Step 3:

Once the upload is complete, you'll be taken to a new page. Get the direct link from that page.


Step 4:

Go to Dashboard - Design - Page Elements - Header - Edit - Remove Image - choose 'From the Web' - paste the direct link in the field provided - press enter once - just wait till you see your image appears there - Save.


Again, don't press 'Save' right after entering your directlink. Wait for your image to load. You'll be able to see the image there in the window, as shown below:



You're almost done. Check your blog now. If everything is fine, you're done. For some of you, the header image might be oversized now. This is because Blogger will not automatically resize your image for you, as you're hosting your image elsewhere. If this is the case, go to an online image resizer (choose your file, and choose your new width), and resize your image so that it will be smaller. Then repeat Steps 2 to 4.

And that will be it. Hopefully this temporary fix will restore your blog's cosmetic appearance again.
Labels:

44 comments:

  1. AnonymousJanuary 23, 2011 at 5:47 AM

    Thank you thank you thank you!!! Finally got my header back to normal!

    ReplyDelete
  2. YoboyJanuary 23, 2011 at 6:07 AM

    @Mybeautyspots: Happy to help. Glad it worked.

    Regards.

    ReplyDelete
  3. ChantelleJanuary 23, 2011 at 7:33 AM

    Perfect! Thanks!

    ReplyDelete
  4. ♛ Kerani Sekolah ♛January 23, 2011 at 10:51 AM

    yes, i have made it..i uploaded into photobucket :) thanks !

    ReplyDelete
  5. Arvind JangidJanuary 23, 2011 at 11:14 AM

    Thanks a lot sir, it really works, visit my blog
    http://arvindjangid.blogspot.com

    ReplyDelete
  6. PhilJanuary 23, 2011 at 11:33 AM

    doesn't work, hosted on photobucket, doesn't work on any host for me sorry.

    ReplyDelete
  7. TrueColorsJanuary 23, 2011 at 3:25 PM

    thanx a lot yo boy.
    realy u helped me alot..


    regards
    red122
    (www.vidrecode.blogspot.com)

    ReplyDelete
  8. YoboyJanuary 23, 2011 at 5:21 PM

    @Chantelle, @❤NazirahMoktar❤, @अरविन्द जांगिड, @red122: Thanks for the feedback. Technically it should work. Glad it did for you.

    @Phil: That can't be true. Technically, images hosted at a different place will work. Let me tell you why. When you upload your header to blogger, your image's url will be something like this:
    http://3.bp.blogspot.com/_VZprIDHV4-Q/TTswxyq2beI/AAAAAAAAClI/A3SMzn3CaEE/s400/dropshadowl.jpg

    This URL is stored in data:sourceUrl and this variable is widely used in your header image placement. Now see the 's400' in the URL above. You can resize your image by changing this value, it's like built-in image resizer. Previously, data:sourceUrl will automatically choose a correct value based on your blog's width. But with the current glitch, it stays at s400. That is why it appears blurred/pixelated/small, because you're technically seeing a small image being zoomed in.

    By hosting your image elsewhere, you're fixing the size of it. That should take care of the problem.

    Regards.

    ReplyDelete
  9. Crystal CookJanuary 23, 2011 at 9:48 PM

    Thanks for the tips, I tried it with Imageshack and it looks a little better, but it's still too small. It doesn't fit the header. Is it possible you could take a look and tell me what I'm doing wrong? I'd really appreciate it. Thanks!

    ReplyDelete
  10. YoboyJanuary 24, 2011 at 12:16 AM

    @Crystal Cook: You did it right, except for one thing. The image that you saved to your computer before uploading to imageshack is already small. I should have mentioned this in the steps above. I will make necessary changes to the steps above.

    Just repeat step 4 but use the following direct link:

    http://img714.imageshack.us/img714/7190/flinthat1.jpg

    ReplyDelete
  11. intanJanuary 24, 2011 at 2:45 AM

    oh my!
    it's works yeah~!
    thanx for the guides,buddy!

    ReplyDelete
  12. YoboyJanuary 24, 2011 at 2:50 AM

    @intan: Glad you got it fixed. Happy to help.

    Regards.

    ReplyDelete
  13. missreverieJanuary 24, 2011 at 3:22 AM

    It's not working for me!! It doesn't show the image of my the header after I pasted the link from imageshack there and thus no banner at all on my site. =(

    ReplyDelete
  14. YoboyJanuary 24, 2011 at 3:26 AM

    @missreverie: In step 4, after entering your directlink into the address field and pressing enter on your keyboard, just wait for a little while until your image loads. It depends to your Internet Connection and sometimes your browser on how fast the image will load and be revealed. For best results, I suggest you to use Google Chrome (as opposed to Internet Explorer, Firefox, Safari, etc) for this purpose.

    You will not see your header image if you click 'Save' before your image is shown/loaded in the Header edit window.

    Regards.

    ReplyDelete
  15. Laurie PalanzaJanuary 24, 2011 at 5:07 AM

    Thanks, much! Great workaround, and thanks for restoring my peace of mind!

    ReplyDelete
  16. YoboyJanuary 24, 2011 at 6:20 AM

    @Laurie: No problem at all, glad I could be at help.

    Regards.

    ReplyDelete
  17. Melissa KelmanJanuary 24, 2011 at 6:42 AM

    thank you so much for this tutorial!! i wasted 1 1/2 hours resizing my image and seriously thought i was going nuts, then googled it and realized its not only me :) this worked perfect!!

    ReplyDelete
  18. AnonymousJanuary 24, 2011 at 7:04 AM

    Thanks sooooo much. You've been a true angel for me today. I've been trying to solve this for hours via CSS....

    ReplyDelete
  19. YoboyJanuary 24, 2011 at 2:33 PM

    @Melissa, @Anonymous: Thanks for the feedback. And thanks for stopping by. Have fun.

    Regards.

    ReplyDelete
  20. Timothy FitzJanuary 24, 2011 at 6:05 PM

    THANK YOU!

    ReplyDelete
  21. YoboyJanuary 24, 2011 at 8:43 PM

    @Timothy: You're welcome.

    Regards.

    ReplyDelete
  22. SZMJanuary 25, 2011 at 12:31 AM

    Thank you so much! What a wonderful + informative blog you have! Adding it to my RSS feeds!

    ReplyDelete
  23. YoboyJanuary 25, 2011 at 12:32 AM

    @The Frat Pack + Me: Glad you find it helpful. Enjoy your stay here.

    Regards.

    ReplyDelete
  24. PhotographyJanuary 25, 2011 at 12:49 AM

    I uploaded to photobucket but when i try to get the direct link it just goes yellow on that box and says copied (where??) if i left click there is no option to save it or anything - can you help? thanks

    ReplyDelete
  25. PhotographyJanuary 25, 2011 at 1:01 AM

    I got it thanks so much!!!

    ReplyDelete
  26. YoboyJanuary 25, 2011 at 1:03 AM

    @The Clip Cafe: Once you've uploaded your image to Photobucket, you will be greeted with a 'Upload Complete!' message. Scroll down on the same page, and check the box below your uploaded image. Then click on 'Choose action'. Then click on 'Generate link codes for selected'. A new window will appear. Get the address shown in the last box, with title 'Direct link (Email, IM and more)'. That's the direct link that you're looking for.

    ReplyDelete
  27. mary baileyJanuary 25, 2011 at 4:41 AM

    brilliant! thank you!

    ReplyDelete
  28. mary baileyJanuary 25, 2011 at 4:42 AM

    brilliant! thank you!

    ReplyDelete
  29. Laurie in SCJanuary 25, 2011 at 8:31 AM

    Thanks so much! Was able to get my header looking sharp (literally!) with your tips. I truly appreciate you sharing this info with us. God bless!

    ReplyDelete
  30. Angela McInnisJanuary 25, 2011 at 9:51 AM

    I have worked diligently trying to fix my blog header for over 14 hours...after reading this I had it fixed in less than 5 minutes! Thank you so very much for the help!

    ReplyDelete
  31. DanaJanuary 25, 2011 at 12:34 PM

    You said to wait until image shows up before you hit save. When using the direct link, it never shows up & even when I save there is nothing there...no header. What am I missing? I paste the direct link in & then wait, but no image comes up.

    ReplyDelete
  32. PARIMITAJanuary 25, 2011 at 2:18 PM

    I tried yr suggestion..it seems i have to resize my pic.tried going to the link u have given. but i dont know in what size i should resize. i am using blogger minima as the template and using background from another site.
    PLEASEEEEEE HAVE A LOOK AT MY BLOG AND SUGGEST
    http://mytravelsmyexperiences.blogspot.com

    at present i have uploaded the header pic using blogger

    i am not a tech savvy person and its becoming v.difficult to understand ...resize pic size (what size?)where will i find this..how much perfect it will be for my blog etc

    pleaseeeeeeeeeeeeeeeeee help

    ReplyDelete
  33. PatchworkPassionistaJanuary 25, 2011 at 4:30 PM

    You just made my day!! THANK YOU.

    ReplyDelete
  34. YoboyJanuary 26, 2011 at 4:26 AM

    @Mary Bailey: You're welcome. Enjoy your stay here.

    @Laurie: Glad you got it resolved. Happy to help, as always. God bless you too.

    @Angela McInnis: Happy to help. You now know where to come if you have any problem with your blog in the future. If you have a specific question to ask, you can shoot it here.

    @Dana: The loading can sometimes get idle, and this depends on many factors - browser used being the main one. For best results, use Google Chrome.

    @PARIMITA: I see you have gotten this resolved. But I still owe you an explanation. Your original picture's width is 1600px. If you host this picture else and use it as your header, your header image will overflow, as your header is only 648px. You could access the resized version of your header at this link:
    http://2.bp.blogspot.com/_EY8IkDFH8qc/TT5kv8a2I7I/AAAAAAAACHE/hiyBDKtaMl8/s648/DSC01914.JPG

    @PatchworkPassionista: Happy to help, as always. Glad you find it helpful.


    Update: This problem has been resolved now.

    ReplyDelete
  35. PeterDecember 10, 2011 at 6:00 PM

    I just discovered this new bug. My work around was to add the image width and height to this piece of code in my template.

    #header a img {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: 0;
    width:900px!important;
    height:250px!important
    }

    ReplyDelete
  36. Vegan MagicDecember 14, 2011 at 7:09 AM

    Thank you so much for this. It's December and Google still has this problem, so unprofessional:( My header had no problem for months and today I noticed it was blurred. I used imageshack as you suggested but now you can't upload images anonymously. Anyway, I signed up and my header is back to normal. Phew! Thanks again!

    ReplyDelete
  37. YoboyDecember 15, 2011 at 2:55 AM

    @Vegan Magic: I'm pretty sure the problem that occurred at the time this post was written has been resolved. But somehow another problem with similar symptoms resurfaced recently. Blogger Help Forum member Peter has left a comment above, see if his CSS fixes the issue for the time being, if you don't want to host your header image elsewhere.

    Cheers and God bless.

    ReplyDelete
  38. megan danielleJanuary 2, 2012 at 12:09 PM

    thank you so stinkin much!!!!!! i finally fixed my header, ahhhhh it was driving me crazyyyy!!!

    ReplyDelete
  39. YoboyJanuary 2, 2012 at 5:13 PM

    @megan danielle: No problem at all :) Cheers and God bless..

    ReplyDelete
  40. cardsandacuppaApril 13, 2012 at 6:38 AM

    Thank-You, it worked first time, excellent! I am so grateful! xx

    ReplyDelete
  41. ScarlettSeptember 2, 2012 at 10:49 PM

    Hi, I was wondering if you could help me with my problem?
    I was gonna change my blog header picture today, but I noticed that my header widget doesn't have the "edit" button anymore! It's just all blank :(

    thank you if you can help me :)

    ReplyDelete
  42. ScarlettSeptember 2, 2012 at 11:30 PM

    I managed to solve my problem by myself :D
    but thank you for the awesome blog! Your tips were very helpful when I started blogging :)

    ReplyDelete
    Replies
    1. YoboySeptember 3, 2012 at 1:53 AM

      Hi Mimi,

      Glad you got your issue figured. And thanks for the feedback, appreciate it very very much! :)

      God bless~

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.

Subscribe to: Post Comments (Atom)