Monday, April 27, 2015

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

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

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

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 advisable that you first create a backup just in case you are not happy with the final results or have accidentally changed the wrong code.
On your right sidebar in the Blogger Administration panel, head into Template, then on the top right side you should see a button 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 you may begin changing that value.


Always use the preview feature before saving your template and when you are sure you changed everything to your taste, you may finally click on the save button.