How to change width of Posts, Body and Sidebar in Blogger

If you have downloaded a custom template for your blog and you are unsatisfied with its width for the posts, body or sidebar, this post will guide you on what you need to change in order to achieve your desired results.

Normally we can easily do that by using the default template editor that Blogger provides us with, but in most cases it does not support custom templates so we would need to manually change the HTML code ourselves.

Advantages

• You can place wider widgets on your sidebar - very useful especially for ads
• You can have larger images in your posts
• Gives your blog a better look

Changing the width

Now before you begin doing any changes to your template, it is highly recommended that you first create a backup just in case you are not happy with the final results or have accidentally changed the wrong piece of code.


On your right sidebar in the Blogger Administration panel, head into Template, then on the top right side you should see a button labeled Backup/Restore. Click on that and then click on the orange button that says Download full template.

Now that you have made a backup of your template, you can begin experimenting with the width. Below you will find the three different codes being used for all three parts of your template. When you have opened up the HTML editor for your template, simply search for each of these codes.

Overall blog width:

#outer-wrapper {

Sidebar width:

#sidebar-wrapper {

Posts width:

#main-wrapper {

Below each of these codes, you should find another code that says the following:

width: 500px;

In this case, the 500px is just an example. Yours could be 560px, 400px, etc. Keep in mind, in some cases you may not have px being used but %. Now all you have to do is change that value.

Advice:

Always use the preview feature before saving your template. Finally, when you are sure you changed everything to your taste without ending up with side-effects, you may finally click on the Save button.