bloggerstation.blogspot.com Web
CHOOSE YOUR LANGUAGE

 

Headlines

BLOGGER-STATION

Thursday, June 5, 2008

I have noticed that some bloggers who are have NO or very little knowledge about HTML , CSS ,XML have problemss in customizing their template acording to their own needs...
Well i cant give you a complete HTML tutorial here but i have seen that one of the most common needs most of the bloggers is to increase the width of their blog page so that it occupies more of the page (maybe to attract more traffic)...

So i am gonna give this tutorial about "How TO Increase the width of your blog template" :-

1. Login to your Dashboard and click on Layout under the name of your blog.
2. Click on Edit Html tab next to Page Elements tab. This opens the Edit Template page.

NOTE : Make sure to back up your template before making any changes. The template back up button is provided on the EDIT TEMPLATE PAGE . Download and save it for safety purposes..

Then scroll down in the HTML code box till you reach ....

/* Outer-Wrapper----------------------------------------------- */
#outer-wrapper {
width: 1025px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {width: 530px;
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */}

#sidebar-wrapper {
width: 250px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

#newsidebar-wrapper {width: 170px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

The Outer wrapper contains the main wrapper and the two sidebar wrappers. Their dimensions are described by the width parameter. Their positions are described by the float parameter. Notice that the outer wrapper does not have a float parameter. This is because its position in the center of the page is described by the "margin 0 auto" parameter. To change the width of any of the main or sidebar column change their width parameters only. Then change the width of the outer wrapper by the same amount because it has to expand to include the new width.

NOTE : Preview the template after making changes and back up the template in case you dont like it.

When you change the width then you will also have to change the HEADER width in order to prevent the sidebars from going under the posts and not coming up to take its normal position.
To change the width of the HEADER scroll down in Edit Template text box till you come to :

/* Header-----------------------------------------------*/
#header-wrapper {
width:750px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}
then change 750 to whatever width you want it to be.

IF YOUR TEMPLATES DOES NOT HAVE THE OUTER WRAPPER AS A DIVISON : Then go to Edit Html under Template tab and usually the first division after 'Body' and the a links will usually correspond to the outer wrapper.

If you still dont manage to get it right ... then drop me a mail at kinglife50@gmail.com .

2 Comments:

  1. Ownaville said...
    I've expanded Outer Wrapper, Main Wrapper, and Header but still see my sidebar below the fold. What do I do now?

    I have a new Blogger account with an independent template(Called Mario Bros By: pYzam Team At: pyzamteam.com).

    Thanks in advance.
    Responsive web design said...
    Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.

Post a Comment