How to change the width of the content and the sidebar

This is a common request of bloggers using some of Blogger standard templates when they see wide spaces on either side of the main and side column, like what you will see in this blog if viewed with a large screen. This is to take into consideration those with small screens. If you want to see how this page will display in a 800x600 resolution, type or copy-paste this into the address bar: javascript:top.resizeTo(800,600). You will see what others with small screen see, and there are will wide spaces. If you change the width of the content column and sidebar, it will look different to those with different screen resolution. It may involve a lot of scrolling to see other parts of your blog, and the less patient ones may pass your blog by. Anyway, if you still want to change the width, the instructions are below:

If you want to change the width of the content and the sidebar, you will have to modify the style sheet. This is based on the Blogger Minima template. Look for the following block of codes:

/* Content
----------------------------------------------- */
@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}
#main {
width:410px;
float:left;
}
#sidebar {
width:220px;
float:right;
}
}

Note that the sum of the width of the main column (410px) and the sidebar (220px) is less than the total content (660px). You may change the width to whatever you fancy so long as you keep the sum of the width of the sidebar and the main column to be less that the total content. For example, you may change the width of the total content to be 800px, the main column 500px and the sidebar 270px, and your style sheet will become as follows:

/* Content
----------------------------------------------- */
@media all {
#content {
width:800px;
margin:0 auto;
padding:0;
text-align:left;
}
#main {
width:500px;
float:left;
}
#sidebar {
width:270px;
float:right;
}
}

You may also want to change the width of the header as well, as follows:

/* Header
----------------------------------------------- */
@media all {
#header {
width:800px;
margin:0 auto 10px;
border:1px solid #ccc;
}
}

BTW, if you want to see the effect that this change will have on viewers with 800X600 screen resolution, you can type javascript:top.resizeTo(800,600) into the address bar to resize the window to 800x600.

Reminder: Always backup the template before you make any changes to it.

Books from Amazon

Publishing a Blog with Blogger : Visual QuickProject Guide (Visual Quickproject Series)

The Weblog Handbook: Practical Advice on Creating and Maintaining Your Blog

The Rational Guide to Google Blogger

NEWER POST

OLDER POST