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'.
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:
Before:
After
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.JPGNow 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!
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!
Woohoo, a STAR - congratulations !
ReplyDeleteP.S. cute car, too ;)
@Zella: Thanks a lot. They (the car) can change into robots. Brilliant isn't it?
ReplyDeleteCheers and God bless.
Wah aunty also like de cute car eh? its my favourite cute car too=)
ReplyDeleteCongrats to u again dear=P
Muaxxxxx
@Princess Dharshu: Thanks babe. Love you. Muacks.
ReplyDeleteHello there YoboY, Blogger newbie here. I've been doing a crash course on everything Blogger, and your solutions are naturally a gem to have.
ReplyDeleteI 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
@达达: Glad you find the tutorials helpful. Enjoy your stay here. Cheers and God bless.
ReplyDeletehey ur site is awesome. any problem face in my blog ur blog fixed it..hehehe
ReplyDeleteit is blog answer ... keep up good work
u r really a blog Doctor.
@Anon: That's nice of you to drop some words here. Thank for the feedback. Cheers and God bless.
ReplyDeleteI 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@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:
ReplyDeleteAsk a Question
Very helpful, thanks.
ReplyDeleteYou're welcome :)
Deletethis is so helpful! thank you for having this site, i dont know what i would do without it!
ReplyDeleteDon't mention it :)
DeleteAmazing! This was so helpful and worked! I am total beginner and this was so easy to do. Thanks so much!
ReplyDeleteHi Hailey,
DeleteThat's great! Glad you managed to find your way around :)
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.
ReplyDeleteAlso, do you have a tutorial on how to upload a background picture?
Thank you,
Amanda
Hi Amanda,
DeleteThis 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 :)
I cant open my photo in a new webpage. Is that because i have a mac?
ReplyDeleteHi Maggie,
DeleteAre you referring to your post images or sidebar images?
I followed your steps and they worked like a charm! So quick and much easier than anything else I had found out there. Thanks!
ReplyDeleteDon't mention it :)
DeleteLove 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!!
ReplyDeleteWishing you buckets upon buckets of pixie dust,
Karen from Mission: Mouse blog, at missionmouse.blogspot.com
Happy I could be of help Karen.. Cheers!
DeleteThank you so much! I just added my custom header and it was way too big.
ReplyDeleteDon't mention it Caribeanne! :)
DeleteTHANK 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!
ReplyDeleteGlad you got it sorted Sarah :)
DeleteAWESOME. Thank you SO much.
ReplyDeleteThis was super helpful, much easier to understand than other tutorials. Thank you!
ReplyDeleteHi yoga,
ReplyDeletei 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 :)
Hello Deep AK,
DeleteI'd imagine setting a large width to your blog will give you this effect. Or is there something else you're aiming for?
Thank you SO much!! Was struggling with this and your post finally helped!!!
ReplyDeleteThanks! This was quick and easy to understand.
ReplyDeleteIt didn't work. :-(
ReplyDelete