Blogging Tutorial

Actually, this post is dedicated to those who like working with a template or designing a template either for personal usage or to be shared with others.

To create a template layout to be displayed in the middle is very easy because you only need to change the value of margin code into Auto Mode, e.g.:

margin: 0 auto;

Remarks:

0 --> margin of 0px (pixel) for top and bottom boundaries. If you want to have a gap between top margin and bottom margin, you may want to add the value, e.g.: 10px.

auto --> it is to make left margin and bottom margin are always balanced, thus the template layout will be displayed in the middle.

By adding the code to your template, your template layout will be shown in the middle although the visitors have the different resolutions.

Example:

In Kang Rohman’s template code, the outer layout is called #wrap :

#wrap {
    width: 966px;
    margin: 0 auto;
    padding: 0;
    line-height: 18px;
    word-wrap: break-word; 
    font-family: Arial, Tahoma, Verdana; 
    font-size:12px; 
    overflow: hidden; 
    background:$wrapcolor;       
    }

With the code that I type in red, the layout of the template will be displayed in the middle. It will be different if you place the code as this:

#wrap {
    width: 966px;
    margin: 0 ;
    padding: 0;
    line-height: 18px;
    word-wrap: break-word;
     font-family: Arial, Tahoma, Verdana;
     font-size:12px;
     overflow: hidden;
      background:$wrapcolor;      
      }

The Layout will tend to the left. The higher resolution your visitors have, the layout will be shown more to the left.

However, it is just a taste. The site as big as Kompas.com prefers to be seen in the left instead of in the middle, and Detik.com as well.

Hopefully you are so upset with this post!