FINDING OUT HOW LARGE YOUR IMAGES CAN BE
To start off, I want to quickly explain images in blogger as it will help you actually understand what you are doing and why. Your template that I have installed is set to be able to accommodate a maximum image size. This depends on your particular template- most can accommodate images anywhere from 550 to 900 pixels wide. To find out the maximum size image you can post, all you need to do is view the "Page Source" of your blog. You can do this by clicking on the "View" menu of your browser bar and then look for "Page Source". You can also usually right click and click "View Page Source". Now you need to search in your template for "#main-wrapper". The easiest way to do this is to press ctrl+F and copy and paste #main-wrapper in the search field. It will highlight the area in your source code. Once you have found "#main-wrapper" look directly below it and you will see the word "width:950px". Yours might not be 950px, it might be 800px. Regardless, what you are looking for is the number of pixels wide your template is as this will tell you how large your images can be. Simply subtract 20 from the number you find and that is the maximum width your images can be. So, if your template is 950 pixels, subtract 20 and you can post images up to 930 pixels wide!
SIZING YOUR IMAGES CORRECTLY
Now that you know how wide your images can be, you will need to size them so that they fit your template. Most images straight off a camera are 1600+ pixels wide- WAY too large for a blog layout. All you need to do is use whatever photo editing software you have to size the images to the width of your choice, making sure that width will fit into your template (I use Photoshop). You can also use Photobucket.com or Flickr.com. An account is free if you don't already have one and both places have an option to do a batch resize upon uploading! Now that you have your images sized correctly follow the steps below!
UPLOADING YOUR IMAGES
If you have sized your images with a photo editing software (such as Photoshop) and you will be uploading them directly from your computer, then follow these instructions:
1) Go to the post you want to add the images to. In the compose window click the little Image icon located in the compose toolbar.
2) Click the Browse button to find the image you want to add. Once it uploads, add it into the post.
3) Click on the image and some options will pop up that let you control the image size. You will see several options such as "Small" "Medium" "Large" "X-Large" and "Original Size". Click on ORIGINAL SIZE. Because you have already sized this image to fit your layout, it will enlarge without being too big!
If you have sized your images with Photobucket or Flickr (or you store your photos in a place like this), and you are uploading them from one of these programs, follow these instructions:
1) Open your photo hosting (Flickr, Photobucket, etc.) account so you can see the images you want to add.
2) In a separate browser window, go to the post in blogger you want to add the images to. In the compose window click the little Image icon located in the compose toolbar.
2) Look to the left of the window that pops up and you will see "From a URL".
3) Find the image in your online hosting account. There will be a link you can copy that will usually be something like "Direct Link" (it will begin with http://). Copy that link and paste it into the "From a URL" field in blogger.
3) Click on the image and some options will pop up that let you control the image size. You will see several options such as "Small" "Medium" "Large" "X-Large" and "Original Size". Click on ORIGINAL SIZE. Because you have already sized this image to fit your layout, it will enlarge without being too big!
OLD POST EDITOR INSTRUCTIONS
If you are using the OLD POST EDITOR and have already sized your images per my instructions above using a photo editing software AND you are uploading them to Blogger directly from your desktop, you will need to follow these steps to upload the images. You will need to tweak the html a little (it is very easy if you follow the instructions!).
1) Upload your photo like normal.
2) Now you will need to switch to the "html" view. You can do this by clicking the "Edit HTML" tab in the top right corner of your post editor window.
You will see the image's html code which will look something like the image below. It might not be exact, but all you are looking for is one little number that is highlighted in blue. Delete the entire piece of code highlighted in BLUE. Now change the piece of code highlighted in PINK to the size you want your image to be (so maybe either 800 or 900 pixels wide). MAKE SURE you leave the little quotation marks in place! Now hit publish post and that is it!
