Change The Width Of Your Blog-Make The Blog Wider

This is an quite important feature,if we care about it.Changing the width of your blogger blog gain some more extra space to place your gadgets,ads,pics,etc or it make your post section more wider that you can place large photos on your blog.

There are lot of templates with different styles but some times you are not happy with one of his limitation  that is less space or width for post,header,sidebar & footer and you think that you have to change it and place a new template over it.

Changing templates always not a proper solution of such problems.We can customise our blog width as we want,we can make it more wider or narrow by some simple tips.

What To Do :

Lets change your blog's width,actually the only problem here is with your CSS style in your template(layout).This is the part in the code section that defines styling including width.the elements.

But don't there is a pattern.A certain way of configuring elements.It is basically a same thing with different names.

Let's start with an example,for this tutorial we will take a default blogger template Minima.Let's do it.

1. First thing is identification .Go to LAYOUT > EDIT HTML and find the parts that define header section,main section,sidebar section and footer section.

For Minima ,we have situation like this:

#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

#main-wrapper {

width: 410px;

float: $startSide;

#sidebar-wrapper {

width: 220px; float: $endSide;

#footer {

width:660px;

clear:both;

Now points to understand:

• header-wrapper is header
• outer-wrapper is main section.
• main-wrapper is post section.
• side-wrapper is sidebar section
• footer-wrapper is footer.

From the above codes it is clear that our header-wrapper is 660px wider,outer-wrapper (post section+sidebar+margins) is also 660px.

2. Let's change the width:

#header-wrapper {

width:750px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

#outer-wrapper {

width: 750px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

#main-wrapper {

width: 500px;

float: $startSide;

#sidebar-wrapper {

width: 220px;

float: $endSide;

#footer {

width:750px;

clear:both;

I have decided to make my post section(main-wrapper) more wider .In order to do this i have to increase my outer-wrapper.Now here is the Rule :

• If you want to increase the width of posts section or sidebar,you have to increase your main section width (outer-wrapper) with the same value.
• 500px+220px+margins=750px. 

In this example i have increased my post section(main-wrapper) for 90px.So i have changed 410px to 500px.I did this same for the main section(outer-wrapper), changed 660px to 750px.I have left the sidebar with the same width that is 220px.

I have also changed the width for my header-wrapper and footer into 750px.

Note that this is not necessary,but better to do it for the shake of symmetry in your layout.

That's all.Remember,when you are changing the width of your blogger template,certain elements under different names.Do not let it to confuse You !

At the end its a 5 minutes job.

If you need any help,ask.........