Blog images and headers

If your blog's sidebar has moved down to the bottom of your blog posts, this is likely because of two or three problems that can be fixed. CAUTION: BE VERY CAREFUL WHEN IN EDIT HTML. SAVE A COPY OF YOUR CURRENT TEMPLATE FIRST. Scroll down until you see the following coding:

# main-wrapper {
width: 410px;
margin-right: 0px;
margin-left: 5px;
float: left;

Notice the line that reads: width: 410px;
This determines the maximum width of the area where your posts are located, the main content area. If your images are wider than 410px, they will squeeze in and force other blog elements out of place, thus jumbling up the looks of your blog. Check the size of your photos before posting them, and resize if necessary. This can be done through the free editing program that comes with a PC.

In your My Photos, left-click to select the image. Right-click on the image. Choose Edit. This will open the image in Paint. In the Resize, select Pixels. Type in a smaller number for the Horizontal, checking the box that says Maintain Aspect Ratio. Then click Save, to My Pictures, and name the new resized image something that you can later recognize. Now it should fit into your post correctly.

Another problem can be that your header image is too large. With a 2 column template, the maximum size horizontally is 650px. With a 3 column, the maximum size is 920px. If you try to use a larger image, it will throw-off the template. I have found that checking the box that says Shrink To Fit will distort the image and any text on it. So, it is best to already have the header image resized and to not check Shrink To Fit. If you have any text, it is best to add your text after you resize the image. Now you are ready to upload the header in Design, and it should fit properly without messing up your blog. The Vertical [height] usually looks best if it is not more than 350px for a 2 column template and not more than 500px for a 3 column template. After all, you don't want your header's height to over power your blog. This blog's header is 920X263. I like a big header, but it is not too big as to over power the blog.

It is possible to change that main content area number for your blog's width from 410px to slightly wider. AGAIN: BE VERY CAREFUL. SAVE A COPY OF YOUR CURRENT TEMPLATE FIRST. This blog's is 460px. Just be aware that if you are not very experienced with html and css, this could also mess up your blog. Always preview in Edit Html before you click Save. It will show in the Preview if the sidebar will be out of place, meaning your main content area is too wide. It is also possible to change the width of your blogs' sidebar or sidebars if a 3 column. Always Preview this as well. It can be found in Edit Html listed as: #sidebar-wrapper { For a 3 column template, one will be listed as: #left-#sidebar-wrapper { For a 3 column template, you may need to adjust the widths of both sidebars.

Here can be the source of another problem. In Design, Blog Posts. The Number of Posts on Main Page may exceed the maximum screen length for Blogger. Try showing fewer posts. If the box has 6 posts, try changing it to 5 posts.

Well, I hope this information will be helpful. I enjoy sharing things I have learned about blogging. Prim blessings to everyone.


  1. Your info is so appreciated Danice!! I will have to write it all down and follow it closely!

    You are so kind to let us non-techy peeps know about this.

    Thanks so much!

  2. Very interesting information Danice.
    Thanks so much!


Post a Comment

Thank you for your comment. However, due to spam and soliciting attempts, any comment unrelated to this blog's theme and/or containing a link to email or another site/blog will not be approved. Spam filters would flag it. Thank you for understanding.