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