.jpg)
Hope you have created your
backup, if any thing goes wrong it would help you. Now,
1. Login into Blogger
2. Select your blog if you
have many
3. Then go to TEMPLATE –> Click on “EDIT HTML“
Now you need to find the
parts that are responsible for, width of your template. There are
Main section, Post
sections, Sidebar, Header Section and Footer. The sample code how they
#header-wrapper {
width:670px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
…………………………….
#outer-wrapper {
width: 670px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
…………………………….
#main-wrapper {
width: 410px;
float: $startSide;
…………………………….
#sidebar-wrapper {
width: 220px; float: $endSide;
…………………………….
#footer {
width:670px;
clear:both;
● header-wrapper is Header
●outer-wrapper is our Main
section, other elements are wrapped inside of it..
● main-wrapper represents
Post Section
● sidebar-wrapper stands for
Sidebar
● footer is Footer
This means from above example,
our header-wrapper is 670px wide, outer-wrapper width (Post
section + Sidebar+ margins) is also 670px, and footer
670 px.
Now let us change the width
of template.
#header-wrapper {
width:750px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
…………………………….
#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
…………………………….
#main-wrapper {
width: 500px;
float: $startSide;
…………………………….
#sidebar-wrapper {
width: 220px;
float: $endSide;
…………………………….
#footer {
width:750px;
clear:both;
●If you decided to make your
Post section (main-wrapper) wider. In order to do
this, You have
to increase your outer-wrapper. Pleas note the following
points while changing width :
●
If
you want to increase the width of your Posts section or Sidebar, you HAVE to
●increase your Main section
width (outer-wrapper) for the same value! ►
◄ 500px + 220px + margins =
750px ►
In this example, I’ve
increased my Post section (main-wrapper) for 90px, so I’ve changed 410px
into 500px. I did the same
for the Main section (outer-wrapper), changed 670px into 750px. I’ve
left the Sidebar the same
width, 220px.
I’ve also changed the width
for my header-wrapper and footer into 750px. Note that this is not
necessary, but better do
it…for the sake of symmetry in your Layout…
● Remember, when you’re
changing the width of your (custom) Blogger template, certain elements will be
(can be) under different names. Do not let it confuse you! You know how the elements
are organized inside of it….and in the end, its a 5 minutes job.
.jpg)
