Thursday, September 10, 2009

How to widen the posts column in Blogger

After you change the width of your posts column (main column), you might also want to change the width of your sidebar and the width of your blog as well. How do I widen the posts column in Blogger? It is easy enough but you need to be careful. The first step is sign in to your Blogger account. After login, you will reach your dashboard and click on "Layout" then click "Edit HTML" and your HTML column page will appear.

Edit HTML TabBefore proceed the next step, it is strongly suggested that you make a back-up copy of your template. (to create a back-up copy you can click the "Download Full Template" link above the existing HTML column). If you do something which you do not like or know how to fix you can always upload your template and go back to how you originally were.

Create copy of blog templateWhen you are at Edit HTML page scroll down your template until you come across the main wrapper. It looks like this;

#main-wrapper {

To facilitate the search, you can press Ctrl + F on your keyboard, enter the code in the field provided and the browser will help you to find it. After that, change the width of your posts column to the size you want. The red numbers as i illustrated below are the numbers that you have to change.
#main-wrapper {
width: 45%;

Hit preview and if everything went well you will see the changes on your blog. If you want it more narrow or wider you can change the numbers. Dont forget to click "SAVE TEMPLATE" when you're done.

how to widen the main column

1 comment:

  1. Thanks, this was very helpful especially with that diagram with the names for each wrapper part.