Widening the layout/page of blog

When i was maked the blog, i use template in blooger,
and i wasn't like wide of template,
or when we want to enhaching the coloum sidebar of our blog..
and i want to widening my blog..


To widening or blog,, we must know about header, main, sidebar and footer


Before we widening the layout/ page, we must calculating ahead..
we calculate wide of
Outer=Header=footer=main+sidebar+Space*
*Space= generally about 20 to 50

after calculate, we get (example)..
Outer=Header=Footer= 950px
Main= 600px
Sidebar= 300px
spasi= 50 px

hmm,, now we can widening layout/page of blog..
1. entrance to your blog and go to edit HTML..
2. Click expand template widget
3. Find Script #outer-wrapper
4. see this code..
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

5. change red numbers with number we calculated mention..
#outer-wrapper {
width: 950px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 600px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 300px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

If you are finish change code/script...
you must change the wide of header and footer..
to chaneg wide header and footer, the methode same with the methode to change the sidebar and main..
you find #Header-wrapper and #footer-wrapper, after that you change the number of wide..

hmm, oke,, after all,, you finish to change the widening the layout..

0 comments:

Post a Comment