Southern Listeners

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

Monday, April 4, 2011

Blogger Header Image too Large

My first post as an Official Top Contributor in Google Blogger Help Forum. Yeahhh, finally I'm a Blog*Star! But I really need to learn how to better manage my time. I'm finding it really hard to find time to publish blog posts these days. Not to mention the depleting amount of ideas to blog about. It's just a matter of time before I start writing about things that are not Blogger related.

Back to this week's post. This one is for the beginners. I have written a post on how you can resize blogger's header image some time ago. I should have included this method as well, it's not that hard and it's straight forward. It's easier rather. Here comes the intro. When you upload a really huge-dimensioned image to Blogger as your header image, you won't be able to see the entire picture. It will kinda zoom in and crop the side of the picture that does not fit in your blog's width. One can always resize header image before uploading to Blogger. But it is always convenient to easily change the size of the image by just changing a number or two, and I'm gonna show you how.

Before:


After:



Step 1:

I'll be using Firefox in this example. You can use other browsers, the method will be similar. Go to your blog, and right click on your oversized header image. Click on 'View Image'.



Step 2: 

Copy your Image's address. We have to change a number in it.


Mine looks like this:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj14SoH8S9FHwouMmnmK52Gn5pbNaf_o1IGB9_6ZDm-_HjIRPB2OwAe4fQ7HXvW82Fs_kOqlbNrPT-KoOBnFmau3HlHTUDBvcNGr_qQlu1xVlzsk3ZjF_gXyce9VZyxUp1gnlf0VM3nutk/s1600/P1010367_edit.JPG
 
Now open Microsoft Word or Notepad or anything that you can type onto, and paste the address. Locate the s1600 portion near the end of your image's address. Change it to a smaller number like s1000. Now copy the new text instead. (Note: sometimes you will see other numbers instead of s1600, but s1600 is as large as it can get.)

Before:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj14SoH8S9FHwouMmnmK52Gn5pbNaf_o1IGB9_6ZDm-_HjIRPB2OwAe4fQ7HXvW82Fs_kOqlbNrPT-KoOBnFmau3HlHTUDBvcNGr_qQlu1xVlzsk3ZjF_gXyce9VZyxUp1gnlf0VM3nutk/s1600/P1010367_edit.JPG

After
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj14SoH8S9FHwouMmnmK52Gn5pbNaf_o1IGB9_6ZDm-_HjIRPB2OwAe4fQ7HXvW82Fs_kOqlbNrPT-KoOBnFmau3HlHTUDBvcNGr_qQlu1xVlzsk3ZjF_gXyce9VZyxUp1gnlf0VM3nutk/s1000/P1010367_edit.JPG

Step 3:

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Header - Edit - Remove Image - From the Web - Paste the Address from your word editor.

If you're using the new Blogger interface: Go to Dashboard - Layout - Header - Edit - Remove Image - From the Web - Paste the Address from your word editor.


Your image will load almost instantaneously as soon as you've pasted the modified address into the address field. Once your image is loaded, click on Save.


Check your blog and see if the image is appropriately sized now. If you need to make adjustment, change the value s1000 into something else until you're satisfied with what you're seeing.

That's all folks. Have fun!

35 comments:

  1. Woohoo, a STAR - congratulations !
    P.S. cute car, too ;)

    ReplyDelete
  2. @Zella: Thanks a lot. They (the car) can change into robots. Brilliant isn't it?

    Cheers and God bless.

    ReplyDelete
  3. Wah aunty also like de cute car eh? its my favourite cute car too=)

    Congrats to u again dear=P

    Muaxxxxx

    ReplyDelete
  4. @Princess Dharshu: Thanks babe. Love you. Muacks.

    ReplyDelete
  5. Hello there YoboY, Blogger newbie here. I've been doing a crash course on everything Blogger, and your solutions are naturally a gem to have.

    I am still at the design phase my blogger page, so I have not much to show t the moment, will share with you later down the track. Till then, there is little I can help SEO-wise or give you a "bump" up in Google, apologies

    Kudos and many thanks for all the wonderful solutions

    ReplyDelete
  6. @达达: Glad you find the tutorials helpful. Enjoy your stay here. Cheers and God bless.

    ReplyDelete
  7. hey ur site is awesome. any problem face in my blog ur blog fixed it..hehehe
    it is blog answer ... keep up good work
    u r really a blog Doctor.

    ReplyDelete
  8. @Anon: That's nice of you to drop some words here. Thank for the feedback. Cheers and God bless.

    ReplyDelete
  9. I am trying to fix the problem that my header is find in Firefox but too large in IE - the header picture hangs over the right side. I tried the fix you have in the forum but it did nothing. I have also tried the above just to see what happens but i end up without a header altogether. Which I guess makes sense - bc if you are removing the picture the address would be not good anylonger?

    ReplyDelete
  10. @Helpless: What is your blog's address? It'll be easier for me to assist you if you post your question in the help forum. See this link for more info:

    Ask a Question

    ReplyDelete
  11. Very helpful, thanks.

    ReplyDelete
  12. this is so helpful! thank you for having this site, i dont know what i would do without it!

    ReplyDelete
  13. Amazing! This was so helpful and worked! I am total beginner and this was so easy to do. Thanks so much!

    ReplyDelete
    Replies
    1. Hi Hailey,

      That's great! Glad you managed to find your way around :)

      Delete
  14. I have to say, this post has been the most helpful of all the ones I have looked at, but I'm still having a hard time getting my header size correct. Its either too wide or too tall. Do you have any suggestions---blog address is maestra-amanda.blogspot.com--if you'd like to take a look and offer suggestions.
    Also, do you have a tutorial on how to upload a background picture?
    Thank you,
    Amanda

    ReplyDelete
    Replies
    1. Hi Amanda,

      This is the image that you're using now:
      http://1.bp.blogspot.com/-K8zgXaI1pdU/URWMOZjUCgI/AAAAAAAACEo/3WY50LaNKuk/s1150/Slide1.JPG

      It is a 960x720px image. Do you have a prefered size in mind? If you want to maintain the current width of your image, and adjust its height (or the other way around), you're gonna have to edit this picture in your computer first and bring it to the desired size. It is possible to maintain the width and adjust the height using code alone, but it'll cost your image to be pixelated and ugly - not something that I'd recommend.

      As for backgrounds, have you tried going to Dashboard - Template - Customize - Background?

      Cheers :)

      Delete
  15. I cant open my photo in a new webpage. Is that because i have a mac?

    ReplyDelete
    Replies
    1. Hi Maggie,

      Are you referring to your post images or sidebar images?

      Delete
  16. I followed your steps and they worked like a charm! So quick and much easier than anything else I had found out there. Thanks!

    ReplyDelete
  17. Love this! Totally helped my logo *finally* fit on my blog. (And might I add, this was the fourth and ONLY tutorial that got it right for me - I am html-ally challenged.) Thank you! I could reach right through the computer and kiss you!!

    Wishing you buckets upon buckets of pixie dust,
    Karen from Mission: Mouse blog, at missionmouse.blogspot.com

    ReplyDelete
  18. Thank you so much! I just added my custom header and it was way too big.

    ReplyDelete
  19. THANK YOU! I've been trying to follow directions from other sites for half an hour and couldn't figure it out. Your directions helped me in minutes! Thanks for sharing!

    ReplyDelete
  20. AWESOME. Thank you SO much.

    ReplyDelete
  21. This was super helpful, much easier to understand than other tutorials. Thank you!

    ReplyDelete
  22. Hi yoga,
    i am using Awesome Inc. template, i want to have header like mashable.com.
    is it possible for a blogger blog?

    http://blogenia.blogspot.com/

    Thanks in advance :)

    ReplyDelete
    Replies
    1. Hello Deep AK,

      I'd imagine setting a large width to your blog will give you this effect. Or is there something else you're aiming for?

      Delete
  23. Thank you SO much!! Was struggling with this and your post finally helped!!!

    ReplyDelete
  24. Thanks! This was quick and easy to understand.

    ReplyDelete

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